@Tupic123

Включить слайдер только в модальном окне?

Добрый день, есть несколько свайперов которые вызываются на одной странице

Данные слайдеры хранятся в разных модальных окнах

Как сделать что бы свайпер инициализированные только в рамках открытого модального окна?( Что бы активным был только один) Для избежания конфликтов, несколько свайперов одновременно не работают.

Код свайпера :
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
      },
      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()	
          }
    
        }
      }
    });


Код вызова модального окна:
$(".popup-link").click(function (e) {
  e.preventDefault();

  var $data = $(this).attr("href");
  $($data).fadeIn();
});
  • Вопрос задан
  • 55 просмотров
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы