Как подружить fancybox и swiper?

Question

[ArtJH]

Суть проблемы:
В слайдере swiper 3 элемента,
Но когда открываешь код в браузере, то свайпер дублирует эти слайдеры и в итоге у меня будто 7 элементов в слайдере
И при нажатии срабатывает fancybox c 7-ью картинками
Как сделать так чтоб fancybox брал только оригинальные элементы без дубликатов. Думаю можно через класс, но только как?

Answer 1

[Евгения Авдеева]

Все есть у них в документации, и конкретно такой случай тоже описан и даже пример приведен)
https://codepen.io/fancyapps/pen/NLQZBr?editors=1010

Comments

[Евгения Авдеева]

А это я уже адаптировала чисто под свайпер код для своего проекта, работает как часы)

.simple-gallery._alt
    .swiper-container.swiper-container_gallery
        .swiper-wrapper
            a.swiper-slide(href="img/room1-1.jpg")
                img.simple-gallery__img(src="img/room1-1.jpg" title="" alt="")
            a.swiper-slide(href="img/room2-1.jpg")
                img.simple-gallery__img(src="img/room2-1.jpg" title="" alt="")
            a.swiper-slide(href="img/room2-2.jpg")
                img.simple-gallery__img(src="img/room2-2.jpg" title="" alt="")
            a.swiper-slide(href="img/room2-3.jpg")
                img.simple-gallery__img(src="img/room2-3.jpg" title="" alt="")
            a.swiper-slide(href="img/room3-1.jpg")
                img.simple-gallery__img(src="img/room3-1.jpg" title="" alt="")

const swiperGallery = new Swiper('.swiper-container_gallery', {
    slidesPerView: "auto",
    loop: true,
    spaceBetween: 0,
    watchOverflow: true,
    freeMode: true,
    speed: 2000,
    autoplay: {
        delay: 1000,
        disableOnInteraction: false
        // waitForTransition: false,
    },
});

$.fancybox.defaults.thumbs.autoStart = true;
$().fancybox({
    selector : '.simple-gallery._alt .swiper-slide:not(.swiper-slide-duplicate)',
    backFocus : false,
    buttons: [
        "thumbs",
        "close"
    ],
});
$(document).on('click', '.swiper-slide-duplicate', function(e) {
    var $slides = $(this)
        .parent()
        .children('.swiper-slide:not(.swiper-slide-duplicate)');

    $slides
        .eq( ( $(this).attr("data-swiper-slide-index") || 0) % $slides.length )
        .trigger("click.fb-start", { $trigger: $(this) });

    return false;
});

[Евгения Авдеева]

Обратите внимание, что при работе со слайдером где есть дубликаты, дата атрибуты data-fancybox у ссылок не ставятся, все классы задаются в скрипте

Answer 2

[ArtJH]

При зацикленном прокручивании не нашел решения исправить баг
Единственное решение это не делать его зацикленным

Answer 3

[Дмитрий Гребенщиков]

А что мешает прописать селектор фансибоксу типа :not(.swiper-slide-duplicate)?

Comments

[ArtJH]

я не знал это сво-во.
Но даже так не работает, еще больше ломается.

[Дмитрий Гребенщиков]

можно каждому элементу прописать атрибуты с которыми работает фансибокс. смотрите в документации.
например, data-fancybox="slider-items".

Answer 4

[dcBlack]

Можно вот так сделать например, селектор подобрать подходящий для каждого элемента

$('[data-fancybox="gallery"]').fancybox({
        backFocus : false
    });