Swiper slider создает дубликаты слайдов, что делать при использовании лайтбокса?

Question

[Антон Литвиненко]

Всем привет. попытаюсь объяснить суть вопроса.
Мне очень нравится Swiper slider, много где использую. Но возникла проблема при совмещении слайдера в режиме Loop с лайтбоксом Magnific Popup
https://dimsemenov.com/plugins/magnific-popup/
Тут есть режим галереи, код типа такой:

$(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>';
			}
		}
	});
});

Проблема в том, что в режиме Loop Swiper создает дубликаты слайдов, тоесть, слайдов 4, а создается например 8. И при использовании Magnific Popup я просматриваю 8 фото, которые повторяются, вместо 4х.
Пример слайдера из верстки, блок Our exclusive deals:
https://antonlitvin.github.io/royal-yacht/dist/
Тут слайдов 3, а по факту 5 (почему 5 а не 6 тоже кстати непонятно)
В документации
https://swiperjs.com/demos/
в блоке Loop Mode / Infinite Loop их тоже не 10, но и не в 2 раза больше.

Решением для галереи работает отключить Loop mode, но не во всех случаях мне это подходит.

Может кто сталкивался или есть идеи, я в свое время гуглил и не нагуглил, а вот сейчас снова стал вопрос.

Использовать другой слайдер вариант, но верстка уже есть.

Comments

[Rustam Bainazarov]

В связке со Swiper и Fancybox 3 я делал, например, так: для каждого слайдера генерировал галерею через API Fancybox, а по клику на слайд Swiper'а получал его реальный индекс и открывал нужную галерею с этим индексом.

[Антон Литвиненко]

Рустам Байназаров, если внимательно посмотреть на разметку слайдов, которую генерирует swiper, то индексы там повторяются, разница только во внешнем классе который duplicate мои что-то в этом роде. Пишу уже по памяти

[Rustam Bainazarov]

Anton Litvinenko, во-первых, можно обратиться к экземпляру Swiper и получить реальный индекс, а во-вторых, Swiper, помимо класса, ставит слайду ещё и data-атрибут, где указывает значение его реального индекса (data-swiper-slide-index="X").

Вот простейший пример второго подхода. Через CSS с помощью before с контентом из атрибута для слайдов-дубликатов вывожу их реальный индекс:



Так что у Swiper получить реальный индекс проще простого.

[Антон Литвиненко]

Рустам Байназаров, я неахти какой программист, мне пока сложно из ваших советов вынести решение. Банально я в голове не могу придумать как должно работать. Вот есть у меня слайды. Каждый слайд завернут в ссылку на картинку. Часть слайдов дубликаты. Есть магнифик, который вызывается при нажатии на любую ссылку, независимо от того, дубликат это или нет. Так и должно быть. А дальше он как-то используя реальные индексы должен показывать только картинки с реальными индексами. Но вызваться он может и на дубликате. Боюсь мне не хватает мозга для решения простой задачи(

Answer 1

[Антон Литвиненко]

Мне данное решение немного не подошло (я не смог прикрутить к нему опции для видео итд), но в принципе оно рабочее, по крайней мере из того что смог найти, может кому пригодится:

$('.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

[wyzemind]

Я в похожей ситуации создавал скрытый блок со ссылками на галерею и связывал его data-атрибутами со слайдером. Клацаешь на картинку в слайдере - открывается ссылка из скрытого блока, в котором нет никаких дубликатов.

Comments

[Антон Литвиненко]

Оно там немного не так работает. Как я понимаю, если на одном уровне есть количество ссылок, у которых есть вложенные картинки, то оно эти картинки и показывает в галерее. Тоесть в скрыто блок должны быть ссылки с картинками внутри, как-то так. Не знаю даже дублирование контента мне не шибко нравится, но спасибо

Answer 3

[EA-EKB]

Я просто в инициализации magnific'а, в delegate использовал :not(.swiper-slide-duplicate).

Типа этого:

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

Так просто все дубликаты отсеивает и всё. Не надо никаких скрытых блоков с нужными ссылками

Comments

[Антон Литвиненко]

не, тогда просто лайтбокс не срабатывает на дубликатах.
хотя я не совсем так писал