Swiper slider creates duplicate slides, what to do when using lightbox?

Question

HTML

Hello. I will try to explain the essence of the issue.
I really like Swiper slider, I use it a lot. But there was a problem when combining the slider in Loop mode with the Magnific Popup lightbox
https://dimsemenov.com/plugins/magnific-popup/
There is a gallery mode, the code is like this:

$(document).ready(function() {
  $('.popup-gallery').magnificPopup({
    delegate: 'a',
    type: 'image',
    tLoading: 'Loading image #%curr%...',
    mainClass: 'mfp-img-mobile',
    gallery: {
      enabled: true,
      navigateByImgClick: true,
      preload: [0,1] // Will preload 0 - before current, and 1 after the current image
    },
    image: {
      tError: '<a href="%url%">The image #%curr%</a> could not be loaded.',
      titleSrc: function(item) {
        return item.el.attr('title') + '<small>by Marsel Van Oosten</small>';
      }
    }
  });
});

The problem is that in Loop mode, Swiper creates duplicate slides, that is, 4 slides, but for example 8 are created. And when using Magnific Popup, I view 8 photos that are repeated, instead of 4.
An example of a slider from the layout, Our exclusive deals block:
https://antonlitvin.github.io/royal-yacht/dist/
There are 3 slides, but in fact 5 (why 5 and not 6 is also unclear, by the way)
In the documentation
https:// swiperjs.com/demos/
in the Loop Mode / Infinite Loop block there are also not 10, but not 2 times more.

The solution for the gallery works to disable Loop mode, but this does not suit me in all cases.

Maybe someone came across or have ideas, I once googled and didn’t google, but now the question has become again.

Use another slider option, but the layout is already there.

Answer 1

This solution did not suit me a bit (I could not attach options for video, etc. to it), but in principle it works, at least from what I could find, maybe it will come in handy for someone:

$('.product-tab-gallery').each(function() {

  var items = [];
  var $gallery = $(this);
  // Get links
  $gallery.find('a.imageitem').each(function() {
    items.push($(this).attr('href'));
  });

  var uniqueItems = [];

  // Remove duplicates
  $.each(items, function(i, el) {
    if($.inArray(el, uniqueItems) === -1) {
      uniqueItems.push(el);
    }
  });

  items = [];

  // Put in Magnific format
  $.each(uniqueItems, function(i, el) {
    items.push({
      src: el,
      type: 'image'
    });
  });

  // Assign an index to each link so the clicked one is shown first
  $gallery.find('a.imageitem').each(function() {
    var $a = $(this);
    $.each(items, function(i, el) {
      if (el.src == $a.attr('href')) {
        $a.data('index', i);
        return;
      }
    });
  });

  $gallery.on('click', 'a.imageitem', function(e) {
    e.preventDefault();
    var $a = $(this);
    $.magnificPopup.open({
      type: 'image',
      items: items,
      gallery: {
        enabled: true
      }
    });

    $.magnificPopup.instance.goTo($a.data('index'));

  });

});

Answer 2

In a similar situation, I created a hidden block with links to the gallery and connected it with data-attributes to the slider. You click on the image in the slider - a link from a hidden block opens, in which there are no duplicates.

Answer 3

I just used :not(.swiper-slide-duplicate) in the initialization of magnific, in the delegate.
Like this:

delegate: '.tile.swiper-slide:not(.swiper-slide-duplicate) a, *:not(.swiper-slide) > a',

So it just eliminates all duplicates and that's it. No hidden blocks with the right links needed