swiper

Open full view…

Looping Issues

Mark Teater
Tue, 17 Mar 2015 22:57:12 GMT

I am trying to create a page similar to the "Thumbs Gallery With Two-way Control" located here: http://www.idangero.us/swiper/demos/23-thumbs-gallery.html I needed the thumbnails to align to the left, and I read on here that using "swiper.params.control" will not work since it uses percentages to keep the two swipers in sync. My solution was to create an event "OnSlideChangeStart" that would force the other swiper to animate to the same "activeIndex" as the swiper that was swiped/clicked/etc. The problem is that when I turn looping on the whole thing breaks. Even when I use "loopedSlides" I receive this error in my console: "Cannot read property 'activeIndex' of undefined." However, before I turned on looping, swiper could read the activeIndex." Looping seems to have some really buggy behavior in v3. Is there anyway to fix looping here? Below is the code I'm using for the working swipers (adding looping breaks everything). I am using a fixed width to each thumbnail so I always have 5 in view, but this number may change in the future. Thanks in advance! var galleryB ottom = new Swiper('.gallery-bottom', { nextButton: '.swiper-button-next', prevButton: '.swiper-button-prev', spaceBetween: 10, grabCursor: true, effect: 'fade', onSlideChangeStart: function() { var x = galleryBottom.activeIndex; galleryThumbs.slideTo(x, 700); } }); var galleryThumbs = new Swiper('.gallery-thumbs', { spaceBetween: 10, grabCursor: true, slidesPerView: 'auto', slideToClickedSlide: true, onSlideChangeStart: function() { var x = galleryThumbs.activeIndex; galleryBottom.slideTo(x, 700); } });

Vladimir Kharlampidi
Wed, 18 Mar 2015 11:52:16 GMT

Should be something like this: ---js var galleryBottom = new Swiper('.gallery-bottom', { nextButton: ‘.swiper-button-next’, prevButton: ‘.swiper-button-prev’, spaceBetween: 10, grabCursor: true, effect: ‘fade’, onSlideChangeStart: function(s) { //link to current instance var x = s.activeIndex; galleryThumbs.slideTo(x, 700, false); //run without callbacks } }); var galleryThumbs = new Swiper('.gallery-thumbs', { spaceBetween: 10, grabCursor: true, slidesPerView: ‘auto’, slideToClickedSlide: true, onSlideChangeStart: function(s) { //link to current instance var x = s.activeIndex; galleryBottom.slideTo(x, 700, false); //run without callbacks } }); --- But note, that activeIndexes could be different in loop mode because of duplicated looped slides, so you should consider it

Mark Teater
Wed, 18 Mar 2015 21:56:25 GMT

Thanks, Vladimir! Your code works great, but it still doesn't solve the looping issue. It might be due to the activeIndexes being different. Is there a different way to solve this problem without using activeIndex?

Vladimir Kharlampidi
Wed, 18 Mar 2015 22:03:49 GMT

You may check the corresponding index by looking at data-Swiper-index attribute on slide. Or just do appropriate plus/minus on active index depending on number of looped slides