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);
Related
( http://clapat.ro/themes/hervin-wordpress/ )
i have done scroll effect with more error like this
var swiper = new Swiper(".swiper-container", {
pagination: ".swiper-pagination",
direction: "vertical",
slidesPerView: 1,
paginationClickable: true,
spaceBetween: 0,
effect: "coverflow",
coverflowEffect: {
rotate: 5,
slideShadows: true,
modifier: 0,
stretch: 10,
depth: 300,
},
mousewheel: {
releaseOnEdges: true,
sensitivity: 50,
},
observer: true,
observeParents: true,
parallax: true,
speed: 600,
navigation: {
nextEl: ".swiper-button-next",
prevEl: ".swiper-button-prev",
},
});
and result same here
https://swiperjs.com/demos/270-mousewheel-control.html
Now I need any idea to fill in the text in the scroll like link above
you probably don't need Swiper for this
this effect can be achieved by some parallax techniques
you may need some 3rd party library to make your life easier
if you are using react you may use FramerMotion or spring
if you are using vanilla javascript you can find dozens of parallax scrolling libraries you may check this one
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
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",
},
});
Swiper 3.4.1 on Windows
I did a slider with arrow navigation, infinite loop and fade effect:
var swiper = new Swiper('.swiper-container', {
pagination: '.swiper-pagination',
paginationClickable: true,
nextButton: '.swiper-button-next',
prevButton: '.swiper-button-prev',
spaceBetween: 30,
slidesPerView: 1,
simulateTouch: false,
speed: 1600,
autoplay: 2500,
autoplayDisableOnInteraction: false,
loop: true,
effect: 'fade',
fade: {
crossFade: true
}
});
Expected Behavior
I need to stop animation when click on arrows(next and prev buttons)
Actual Behavior
I can't click next or prev buttons while animation is not finished
How can I skip the animation on click?(I haven't found this in the documentation)
ps: it works when I remove loop, but I need it
I have Swiper set to show 2 rows per column, but when I do this then the Swiper-Slide-Active class are not properly set, i.e. this class is not applied to the slides (2) that are shown in the center of the swiper.
Any idea what am i doing wrong here?, settings for the swiper below:
var swiper = new Swiper('.swiper-container', {
pagination: '.swiper-pagination',
effect: 'coverflow',
grabCursor: true,
centeredSlides: true,
slidesPerView: 'auto',
slidesPerColumn: 2,
spaceBetween: 20,
simulateTouch: true,
centeredSlides:true,
slideToClickedSlide: true,
paginationClickable:true,
grabCursor:true,
coverflow: {
rotate: 45,
stretch: 0,
depth: 100,
modifier: 1,
slideShadows: false
}
});
Currently, multirow Swiper is not compatible with slidesPerView:'auto', so if it is possible for your layout, switch slidesPerView to some fixed value