I have simple bx-slider here. After shrink browser window to small size like 360 slides in recentSoldCarousel act strange. When you click on left/right control you can see correct slide and after that slide blink and another - wrong slide is loading.
Here is my code:
$('#recentSoldCarousel .carousel-inner').bxSlider({
slideWidth: 247,
minSlides: 1,
maxSlides: 3,
moveSlides: 3,
pager: false,
slideMargin: 10,
startSlide: 0,
touchEnabled: true,
oneToOneTouch: true,
preventDefaultSwipeX: true,
preventDefaultSwipeY: true,
autoDirection: 'next',
});
I'm newbe in jQuery so if anybody can help me i will be very gratefull.
Related
I am trying to use one slider code for two sliders using same class name. I have created this codepen to illustrate the problem.
Problems:
Both sliders are not behaving same, means they have different sliding pattern. I have changed the color current active slide to show how both sliders are different.
One of the slider works fine ( till some slides) but other one totally off as you can see, in terms of container height, highlight pattern, etc.
Both of them have chopped content on top or bottom, even though there is no centerMode enabled. The behaviour I was expecting is to current slide to slide on the top and not show the preview of gone slide (top) and next (bottom)
Second slider changes its height randomly. I don't know why
I have tried one solution which didn't work either and it is there as commented code in the codepen.
$(".feature-container").each(function () {
console.log(this.id);
let elm_primary = $("#" + this.id)
.find(".feature-slider")
.get(0);
$(elm_primary).slick({
slidesToShow: 5,
slidesToScroll: 1,
focusOnSelect: true,
autoplay: true,
autoplaySpeed: 1000,
vertical: true,
arrows: false,
infinite: true,
responsive: [
{
breakpoint: 700,
settings: {
slidesToShow: 4,
slidesToScroll: 1,
focusOnSelect: true,
autoplay: true,
autoplaySpeed: 1000,
vertical: true,
dots: false,
arrows: true
}
}
]
});
});
I created swiper with swiper.js and in one of tabs I put normal HTML table. When I open my swiper on mobile, I cant move table to last record. I mean, cursor/finger swipe in horizontal directions. it's worth pointing out, it moves correctly with shift + mouse scroll on table. I When i open swiper on desktop, and next minimize it to mobile, it works correctly. What went wrong?
swiper initialization:
const sliderContainer = this.tabsContainer.find('.swiper-container')[0];
this.slider = new Swiper(sliderContainer, {
simulateTouch: true,
touchRatio: 0,
initialSlide: 0,
spaceBetween: 0,
slidesPerView: 1,
roundLengths: true,
effect: 'fade',
autoHeight: true,
noSwiping: false,
normalizeSlideIndex: true,
slideToClickedSlide: true,
allowTouchMove: false
});
I have implemented owl carousel in my application. I need to show half of prev and next images on the modal gallery of main image.
The modal gallery opens when you click on the main bigger image of the page. I tried to set stagePadding property, but it didnt work out.
Can I achieve the same without stagePadding property.
I have implemented thumbnails and other parts. You can view the implemented fuctionality here.
https://www.realtor.com/realestateandhomes-detail/6836-Xana-Way_Carlsbad_CA_92009_M29922-47778
galleryId.owlCarousel({
items: 1,
loop: true,
margin: 5,
startPosition: 1,
animateOut: 'fadeOut',
navSpeed: 100,
lazyLoad: true,
dots: false,
nav: true,
stagePadding: 100,
});
i had the same problem and my problem was solved with center:false.
$(".owl-carousel").owlCarousel({
center:false,
nav: true,
dots: false,
loop: true,
autoHeight: true,
autoWidth:false,
stagePadding: 10,
margin: 30
});
I am using a jquery plugin for testimonial. When i click next slider button it will stop auto sliding. How can i solve that??
here my js code
$('.testimonials-slider').bxSlider({
slideWidth: 800,
minSlides: 1,
maxSlides: 1,
slideMargin: 32,
auto: true,
autoControls: true
});
here my external js
External Js
Live Demo
Try this :
$(document).ready(function () {
var slider = $('.testimonials-slider').bxSlider({
slideWidth: 800,
minSlides: 1,
maxSlides: 1,
slideMargin: 32,
auto: true,
autoControls: true
});
$('.bx-prev, .bx-next').click(function(e){
slider.stopAuto();
setTimeout(function(){
slider.startAuto();
},300);
return false;
});
});
first fo all: i'm not into JavaScript/JQuery! …but i will try to point out what i want to do.
i'm using the fantastic bx-slider on my page and i made my website responsive via media queries which both works great so far. …but there are some features from the bx-slider-script which i don't want to get active on a specific browser-width. here's what i want:
browser-width LOWER than 500px = load this function:
$('#slider4').bxSlider({
minSlides: 2,
maxSlides: 2,
slideWidth: 230,
slideMargin: 10,
nextSelector: '#next',
prevSelector: '#prev',
infiniteLoop: false,
hideControlOnEnd: true,
pager: false,
useCSS: false,
easing: 'easeInOutExpo',
speed: 1000
});
browser-width HIGHER than 500px = hide the function above and load this one:
$('#slider4').bxSlider({
minSlides: 4,
maxSlides: 4,
slideWidth: 230,
slideMargin: 20,
nextSelector: '#next',
prevSelector: '#prev',
infiniteLoop: false,
hideControlOnEnd: true,
pager: false,
useCSS: false,
easing: 'easeInOutExpo',
speed: 1000
});
…is that even possible in JavaScript? I tried some scripts which are using breaking points but it think my JS-knowledge is to weak to get this to work as i want.
It would be great if there's someone out here which can show me how to do this easily!
If($(document).width() < 500){
...
}else{
...
}
http://api.jquery.com/width/
You may also want to put in an onchange event
$( window ).resize(function() {
resizefunction();
});
http://api.jquery.com/resize/