When using the very popular swiper.js, normally works as expected. However currently loop = true is not working because we have slidesPerView and slidesPerColumn enabled.
Currently have:
var mySwiper = new Swiper ('#my-swiper', {
slidesPerView: 3,
slidesPerColumn: 2,
spaceBetween: 30,
speed: 2000,
loop: true,
autoplay: {
delay: 1000,
disableOnInteraction: false,
},
Several others have ran into a similar issue but not clear solution. One noted they added to help resolve the issue:
setTimeout(function(){
mySwiper.update(true);
mySwiper.slideTo(0, 0)
}, 100);
Tried adding after the above code block but they there is no motion at all. If I added it inside the above code block then it shows one large thumbnail per slide vs 6. Any thoughts?
The developer has confirmed currently slidesPerColumn is not compatible with looping which is why it breaks. Hopefully this will be fixed soon. In the meantime, my workaround is have to instances to simulate 2 rows. Not ideal for a couple reasons but the end result for the user at least is the same.
In 2022 with Swiper v8.4.2 :
-> set a number of slides per view by default,
otherwise Swiper fail to enable infinite loop
<div class="swiper-wrapper">
<!-- swiper-slides ... -->
<div class="swiper-slide">
<img src="..." alt="..."/>
</div>
<!-- ... swiper-slides -->
</div>
my config Swiper :
var init_Swiper = new Swiper('#related_prods',{
// Swiper options :
direction : 'horizontal',
// set a number of slides per view by default
// otherwise Swiper fail to enable infinite loop
slidesPerView: 4,
spaceBetween: 16,
centerInsufficientSlides : true,
centeredSlidesBounds : true,
loop: true,
autoHeight: false,
grabCursor: true,
mousewheel: false,
breakpoints: {
1024: {
slidesPerView: 4,
spaceBetween: 16,
},
767: {
slidesPerView: 3,
spaceBetween: 16,
},
0 : {
slidesPerView: 2,
spaceBetween: 10,
}
},
navigation: {
nextEl: ".swiper-related_products-next",
prevEl: ".swiper-related_products-prev",
},
});
Related
Trying to make a simple carousel with an associated thumbs carousel under it:
// Thumbs
const galleryThumbs = new Swiper(thumbsElement, {
spaceBetween: 10,
slidesPerView: 4,
scrollbar: true,
breakpoints: {
768: {
slidesPerView: 8,
},
},
});
// Slides
const galleryTop = new Swiper(top, {
spaceBetween: 10,
effect: "fade",
loop: true,
navigation: {
nextEl: ".swiper-button-next",
prevEl: ".swiper-button-prev",
},
multipleActiveThumbs: false,
thumbs: {
swiper: galleryThumbs,
},
});
This is working as described, but I have a problem:
When one scrolls to the next image using the navigation arrows, and the corresponding thumbnail is out of sight, the thumbnails scroll in group(by the amount described in the slidesPerView setting). I'm looking for a way for it to scroll just by one, as it does when scrolling with the back arrow.
So I want to do this swiper.js carousel which slides linear from right to the left and after mouse hover it would stop. I used this function which works pretty fine:
$(".swiper-container3").hover(function() {
(this).swiper.autoplay.stop();
}, function() {
(this).swiper.autoplay.start();
});
If speed parameter is not defined in my swiper initialization function, then it stops after a hover (but only if the nearest slider will be on center of carousel).
How to force swiper.js to stop with the function above but not to wait for one of the sliders to be on center?
Rest of the code
const enableSwiper3 = function(){
mySwiper3 = new Swiper ('#swiper-container3', {
loop: true,
slidesPerView: "auto",
spaceBetween: 10,
centeredSlides: true,
a11y: true,
keyboardControl: true,
grabCursor: true,
freeMode: false,
pagination: {
el: '#swiper-pagination3',
},
paginationClickable: true,
breakpoints: {
400: {
slidesPerView: 'auto',
spaceBetween: 20,
loop: true
},
767: {
autoplay: {
delay: 5000,
disableOnInteraction: true,
pauseOnMouseEnter: true,
},
speed: 10000,
}
}
});
mySwiper3.autoplay.start();
}
I also want to lower its speed so whole slider goes linear very slow and just after hovering it it stops. Example on the site below: https://www.intercom.com/ (people are talking section).
I'm working in Nuxt and i Have a bug with a carousel from Vue Awesome Swiper, my problem is it doesn't looping infinity like i hope, this have multiple slider, i think it's the problem
enter image description here
When I want to go to the products on the left it does not end at the end of the cycle, and so on the contrary, if I go to the end the following elements do not send me to the beginning of the cycle
This my code for set up
swiperOption3: {
initialSlide: 0,
freeMode: true,
slidesPerView: 2,
slidesPerGroup: 1,
loop: true,
loopFillGroupWithBlank: true,
autoplay: {
delay: 2000,
disableOnInteraction: false
},
breakpoints: {
1024: {
slidesPerView: 2,
spaceBetween: 10
},
868: {
slidesPerView: 2,
spaceBetween: 20
},
800: {
slidesPerView: 2,
spaceBetween: 10
},
768: {
slidesPerView: 1,
spaceBetween: 0
},
640: {
slidesPerView: 2,
spaceBetween: 10
},
500: {
slidesPerView: 1,
spaceBetween: 10
},
320: {
slidesPerView: 1,
spaceBetween: 10
}
}
}
and this is a summary of my html
<swiper
:options="swiperOption3"
style="min-height:290px; margin-top:2%"
ref="swiperMaxCard"
>
<swiper-slide
v-for="(item, index) in imagenes"
:key="index"
style="text-align: -webkit-center;"
>
<div v-if="
index != $refs.swiperMaxCard.swiper.activeIndex + 1 &&
!$vuetify.breakpoint.smOnly
"></div>
<div v-if="index == $refs.swiperMaxCard.swiper.activeIndex + 1 ||
$vuetify.breakpoint.smOnly
"></div>
</swiper-slide>
</swiper>
In code it looks like this enter image description here, but if it's working should have many copys of the DOM, it works with one slider for view. I saw that several people have worked, but still report cases of a bug in the loop, this is the tool https://github.com/surmon-china/vue-awesome-swiper
I'm working with the Swiper Carousel which allows for the option of a scrollbar. I can pass a string that signifies the scrollbar element but if I try to pass an object as per the docs here, I get an error: Cannot read property 'offsetWidth' of undefined name: TypeError
I've tracked this to the set method here where e.track should be an object where each key is a number and the value should be the element (scrollbar):
Again this works if I set the scrollbar option to a string, but not an object as per the docs. Has anyone seen this before/have any ideas how to get past it? Code below:
This version does not work:
var mySwiper = new Swiper ('.swiper-container', {
loop: false,
slidesPerView: 'auto',
slidesPerGroup: 1,
clickable: true,
observer: true,
observeParents: true,
speed: 400,
spaceBetween: 10,
nextButton: '.swiper-button-next',
prevButton: '.swiper-button-prev',
observer: true,
scrollbar: {
el:'.swiper-scrollbar',
snapOnRelease:true,
draggable:true,
hide: false
},
breakpoints: {
768: {
slidesPerView: 2,
slidesPerGroup: 2,
loopedSlides: 2
}
}
})
This version does (but I cannot add the extra arguments - e.g. draggable & hide):
var mySwiper = new Swiper ('.swiper-container', {
loop: false,
slidesPerView: 'auto',
slidesPerGroup: 1,
clickable: true,
observer: true,
observeParents: true,
speed: 400,
spaceBetween: 10,
nextButton: '.swiper-button-next',
prevButton: '.swiper-button-prev',
observer: true,
scrollbar: '.swiper-scrollbar',
breakpoints: {
768: {
slidesPerView: 2,
slidesPerGroup: 2,
loopedSlides: 2
}
}
})
EDIT: As a follow up, I'm not entirely sure which version of Swiper my client is using, but playing around on https://jsfiddle.net/ makes me think they have an outdated version. I've asked them to update and will close this if that is the case
I am playing around with swiper and I was wondering, is there a way to match activeIndexes of two different swipers?
The idea is to have two swipers on the page displaying images and when you slide one, other follows.
I have tried with swiper1.params.control = swiper2, but that is not really working because swiper1 has three slides per view and swiper2 has only one, so they don't really sync.
So, I started playing around with mySwiper.activeIndex but something is not working.
I am using http://idangero.us/swiper/, version swiper#3.4.2
Here is my code
const swiper1 = new Swiper(swiper-one-container, {
speed: 500,
spaceBetween: 20,
prevButton: '.left-arrow',
nextButton: '.right-arrow',
slidesPerView: 3,
loop: false,
});
const swiper2 = new Swiper(swiper-two-container, {
speed: 500,
spaceBetween: 250,
prevButton: '.left-arrow',
nextButton: '.right-arrow',
slidesPerView: 'auto',
loop: false,
centeredSlides: true,
});
swiper1.slideTo(swiper2.activeIndex);
console.log(swiper1.activeIndex);
console.log(swiper2.activeIndex);