A
A
Artem2021-07-15 12:30:05
JavaScript
Artem, 2021-07-15 12:30:05

How to avoid Duplicate Swiper images in Fancybox 3?

Tried deleting classes on opening. How many things have not been reviewed. Not strong in java, but we will catch up gradually. There is a duplicate of images and because of this, the animation of the slider itself breaks when closing. I tried to play with tricks. The decision of removal of duplicates of images from a modal window is necessary.
Ideally, autoplay on swiper would also be disabled when a modal window is opened. And then I found only how to just turn off on hover and vice versa. Therefore, I just turned it off once, so that when the modal is opened, it does not spin.
I would be very grateful for the help I have been sitting for 3 days.

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

Answer the question

In order to leave comments, you need to log in

Didn't find what you were looking for?

Ask your question

Ask a Question

731 491 924 answers to any question