question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Gallery with thumbs and loop enabled breaks SwiperSlider completly

See original GitHub issue

This 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:closed
  • Created 7 years ago
  • Comments:5

github_iconTop GitHub Comments

7reactions
Electrofenstercommented, Nov 29, 2016

I found the solution:

loopedSlides: $('.gallery-main .swiper-wrapper .swiper-slide').length

5reactions
daygon2007commented, Jun 1, 2017

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.

Read more comments on GitHub >

github_iconTop 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 >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found