Swiper: Gallery with thumbs and loop enabled breaks SwiperSlider completly

[Electrofenster]

This is a (multiple allowed):

• [x] 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

[Electrofenster]

I found the solution:

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

[addzycullen]

@Electrofenster How did you implement that line?

Have you got an example?

[Electrofenster]

@addzycullen add the line to the options of your main gallery

[daygon2007]

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.

[lock[bot]]

This thread has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.