The new Swiper API (v 4.4.1) for the thumbs gallery work exelent, exept one small feature - slideToClickedSlide. I want to gallery will slide to the next slide when I get to the last slide in the the viewport of thumbs.
var galleryThumbs = new Swiper('.gallery-thumbs', {
spaceBetween: 10,
slidesPerView: 4,
watchSlidesVisibility: true,
watchSlidesProgress: true,
centerInsufficientSlides: true,
slideToClickedSlide: true
});
var galleryTop = new Swiper('.gallery-top', {
spaceBetween: 10,
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev',
},
thumbs: {
swiper: galleryThumbs
}
});
Is the some one can help me? Link to the Fiddle
The new Swiper API (v 4.4.1) for the thumbs gallery work exelent, exept one small feature - slideToClickedSlide. I want to gallery will slide to the next slide when I get to the last slide in the the viewport of thumbs.
var galleryThumbs = new Swiper('.gallery-thumbs', {
spaceBetween: 10,
slidesPerView: 4,
watchSlidesVisibility: true,
watchSlidesProgress: true,
centerInsufficientSlides: true,
slideToClickedSlide: true
});
var galleryTop = new Swiper('.gallery-top', {
spaceBetween: 10,
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev',
},
thumbs: {
swiper: galleryThumbs
}
});
Is the some one can help me? Link to the Fiddle
Share Improve this question asked Sep 18, 2018 at 19:20 Web MasterWeb Master 5251 gold badge5 silver badges13 bronze badges3 Answers
Reset to default 4With plain JavaScript:
https://jsfiddle/sa7qwz25/171/
var galleryTop = new Swiper('.gallery-top', {
...
on: {
slideChange: function () {
let activeIndex = this.activeIndex + 1;
let activeSlide = document.querySelector(`.gallery-thumbs .swiper-slide:nth-child(${activeIndex})`);
let nextSlide = document.querySelector(`.gallery-thumbs .swiper-slide:nth-child(${activeIndex + 1})`);
let prevSlide = document.querySelector(`.gallery-thumbs .swiper-slide:nth-child(${activeIndex - 1})`);
if (nextSlide && !nextSlide.classList.contains('swiper-slide-visible')) {
this.thumbs.swiper.slideNext()
} else if (prevSlide && !prevSlide.classList.contains('swiper-slide-visible')) {
this.thumbs.swiper.slidePrev()
}
}
}
});
I crate a function for this, you can trying, is better simple and you personalize your div with then you want, try:
//here you get your div(thumb) with data set
let swiperData = document.querySelectorAll('.myThumb');
//here i create a for to get my click and show my slider with my data
for(let i = 0, lgt = swiperData.length; i < lgt; i++) {
swiperData[i].onclick = function() {
var swiperGetData = swiperData[i].getAttribute('data-slide');
mySwiper.slideTo(swiperGetData, 400);
}
}
If need to use more than one Swiper instance:
var galleryTop = new Swiper('.gallery-top', {
...
on: {
slideChange: function () {
let activeIndex = this.activeIndex + 1;
let nextSlide = this.thumbs.swiper.$el[0].querySelector(`.swiper-slide:nth-child(${activeIndex + 1})`);
let prevSlide = this.thumbs.swiper.$el[0].querySelector(`.swiper-slide:nth-child(${activeIndex - 1})`);
if (nextSlide && !nextSlide.classList.contains('swiper-slide-visible')) {
this.thumbs.swiper.slideNext()
} else if (prevSlide && !prevSlide.classList.contains('swiper-slide-visible')) {
this.thumbs.swiper.slidePrev()
}
}
}
});