timbas
@timbas

Как избежать Дублируются изображения Swiper в Fancybox 3?

Пробовал удалять классы при открытии. Сколько чего не пересмотрел. Не силен в java, но нагоним постепенно. Происходит дубль изображений и из-за этого ломается анимация самого слайдера при закрытии. Играться с фокусами пробовал. Нужно решение именно удаления дубликатов изображений из модального окна.
В идеале чтоб autoplay на swiper тоже отключался при открытии модального окна. А то нашел только как сделать просто отключение при наведении и наоборот. Поэтому просто отключил один раз, чтоб при открытии модала оно не крутилось.
Буду очень признателен за помощь уже 3 сутки сижу.
<div class="swiper-container mySwiper bounceIn wow">
            <div class="swiper-wrapper">
                <a class="swiper-slide" data-fancybox="gallery" data-caption="My caption1" href="img/project/1.jpg"><img class="simple-gallery__img" src="img/project/1.jpg" alt="" /></a>
                <a class="swiper-slide" data-fancybox="gallery" data-caption="My caption2" href="img/project/2.jpg"><img class="simple-gallery__img" src="img/project/2.jpg" alt="" /></a>
                <a class="swiper-slide" data-fancybox="gallery" data-caption="My caption3" href="img/project/3.jpg"><img class="simple-gallery__img" src="img/project/3.jpg" alt="" /></a>
                <a class="swiper-slide" data-fancybox="gallery" data-caption="My caption4" href="img/project/4.jpg"><img class="simple-gallery__img" src="img/project/4.jpg" alt="" /></a>
                <a class="swiper-slide" data-fancybox="gallery" data-caption="My caption5" href="img/project/5.jpg"><img class="simple-gallery__img" src="img/project/5.jpg" alt="" /></a>
                <a class="swiper-slide" data-fancybox="gallery" data-caption="My caption6" href="img/project/6.jpg"><img class="simple-gallery__img" src="img/project/6.jpg" alt="" /></a>
            </div>
            <div class="swiper-pagination"></div>
            <div class="swiper-button-next"></div>
            <div class="swiper-button-prev"></div>

$(document).ready(function() {


    const swiperGallery = new Swiper(".mySwiper", {
        effect: "coverflow",
        grab: true,
        speed: 1000,
        centeredSlides: true,
        slideToClickedSlide: true,
        slidesPerView: 3,
         autoplay: {
          delay: 2000,
          disableOnInteraction: true,
        },
        loop: true,
        coverflowEffect: {
          rotate: 50,
          stretch: 0,
          depth: 180,
          modifier: 1,
        },
        navigation: {
              nextEl: '.swiper-button-next',
              prevEl: '.swiper-button-prev',
            },
        on: {
        init() {
      this.el.addEventListener('mouseenter', () => {
        this.autoplay.stop();
      });

        }
        },
            pagination: {
            el: ".swiper-pagination",
            clickable: true,
            },
    });

$('[data-fancybox="gallery"]').fancybox({
    loop: true,
    autoFocus: false,
    infobar: false,
    buttons: [
   "close"
],
hideScrollbar: true,
clickContent: false,
    transitionEffect: "circular",
    thumbs: {
   autoStart: true,
   autoFocus: false,
   trapFocus: true,
   backFocus: false,
   hideScrollbar: true,
   hideOnClose: true,
   trapFocus: true,
   parentEl: ".fancybox-container",
   axis: "x",

},
wheel:false,

});
$().fancybox({
  selector : '.swiper-wrapper .swiper-slide:not(.swiper-cloned)',
  backFocus : false
});
});
  • Вопрос задан
  • 74 просмотра
Пригласить эксперта
Ваш ответ на вопрос

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

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