Gallery with thumbs and loop enabled breaks SwiperSlider completly
See original GitHub issueThis is a (multiple allowed):
-
bug
-
enhancement
-
feature-discussion (RFC)
-
Swiper Version: 3.3.1.
-
Platform/Target and Browser Versions: macOS, Windows, Chrome, Linux, Safari, Firefox.
I made a working demo here: http://jsfiddle.net/00gz8gLd/12/
When you slide, the thumbnail-slider jumps to images forward the first time.
What you did
var galleryTop = new Swiper('.gallery-top', {
spaceBetween: 15,
slidesPerView: 2,
centeredSlides: true,
loop: true
});
var galleryThumbs = new Swiper('.gallery-thumbs', {
spaceBetween: 10,
centeredSlides: true,
slidesPerView: 'auto',
touchRatio: 0.2,
slideToClickedSlide: true,
loop: true
});
galleryTop.params.control = galleryThumbs;
galleryThumbs.params.control = galleryTop;
Expected Behavior
I expected to slide the thumbnails and the normal Images at the same time and same image
Actual Behavior
The images can’t synchronize each slider
Issue Analytics
- State:
- Created 7 years ago
- Comments:5
Top Results From Across the Web
Gallery with thumbs and loop enabled breaks SwiperSlider ...
When you slide, the thumbnail-slider jumps to images forward the first time. What you did. var galleryTop = new Swiper('.gallery- ...
Read more >SwiperSlider, Gallery with thumbs and loop enabled breaks ...
I found the solution: for gallery-top: loopedSlides: $('.gallery-top .swiper-wrapper .swiper-slide').length. for gallery-thumbs:
Read more >How to Build a Responsive Slider With Swiper.js - Web Design
In this tutorial, we'll build a unique page layout by taking advantage of Swiper.js, one of the most popular JavaScript sliders available ...
Read more >Swiper Demo 31 Thumbs Gallery With Loop Mode - StackBlitz
Swiper demo: Thumbs Gallery With Loop Mode.
Read more >Swiper Changelog
2 - Released on August 22nd, 2015. Fixed issues with loop and mousewheel when swiper stopped on last slide; Improved mouse wheel behavior...
Read more >
Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free
Top Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
I found the solution:
loopedSlides: $('.gallery-main .swiper-wrapper .swiper-slide').length
For those that need a working example, view here: https://codepen.io/jharrelson/pen/RgbZpw
Note: I have also set up image changes on hover and active slide using data attributes. But the concept of this issue is in this pen.