title: Fancybox + swiper
body: <p>Good day!</p>
  <p>There is a swiper slider, when you click on the slides, a fancybox opens. The slider is used in loop mode. The fancybox site has some code to avoid showing duplicate slides. It works well with slick slider, judging by the example, but there are problems with swiper.</p>
  <p>When fancybox is opened, it only shows the slides that are in the markup. That is, it does not show duplicate slides. It seems good, but there are problems.
  fancybox-content is assigned the swiper-slide classes. And swiper-slide-duplicate in the slider itself is set to display: none style. The slider itself breaks down. What could be the problem? Help me please.</p>
  <pre><code>     $().fancybox({
          selector: '.product-detail__slide:not(.swiper-slide-duplicate)',
          backFocus: false,
          loop: true,
          observer: true,
          observeParents: true,
          buttons: [
              &quot;close&quot;
          ]
      });
      $(document).on('click', 'product-detail__slide.swiper-slide-duplicate', function (e) {
          var $slides = $('.product-detail__slide .swiper-slide:not(.swiper-slide-duplicate)');
          $slides
              .eq(($(this).attr(&quot;data-swiper-slide-index&quot;) || 0) % $slides.length)
              .trigger(&quot;click.fb-start&quot;, { $trigger: $(this) });
          return false;
      });
  </code></pre>