shoha-kh / products-gallery-carousel-with-zoom

7 stars 8 forks source link

Automatic scrolling in the mini gallery #5

Closed granakj closed 3 hours ago

granakj commented 3 hours ago

Hello first of all, thank you for the great gallery.

How do I make it so that when I click on the last image in the mini gallery of thumbnails, it automatically moves to display other possible images. I want that when I click on the last picture, another one will pop out from the right side until I'm at the end.

Currently, when I click on the last picture - I don't know if there are any more pictures - I have to move this mini gallery myself to find out if there is another picture.

Thank you.

image

image

granakj commented 3 hours ago

Sorry for this problem, but maybe I can help someone, I found a solution

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()    
      }    
    }
  }
});

https://stackoverflow.com/questions/52393299/swiper-slider-thumbs-gallery-with-slidetoclickedslide-do-not-work-properly

https://jsfiddle.net/agweqhkt/