Проблема с fancy box?

Question

[MaksimBuz]

Добрый день, хочю задать вопрос и буду благодарен за любую помошь в решении. Суть вопроса в том что я обнаружил странное поведение fancy-box3. Для начала я подключил swiper slider в котором на каждый слайд навесил fancy box.

<div class="swiper-slide slide_1" data-fancybox="galery_0" href="./css/img/1_1.jpg">
                    <img class="slide_rout_text" src="./css/img/glass_text.png" alt="">
                    <div class="slide_details">
                        <p>Подробнее</p>
                    </div>
                </div>

В футере проекта создал блок с картинками который скрыл со страницы.

<div class="galery_1">
    <a href="./css/img/1_1.jpg" data-fancybox="galery_0"></а>
    <a href="./css/img/1_2.jpg" data-fancybox="galery_0"></а>
    <a href="./css/img/1_3.jpg" data-fancybox="galery_0"></а>
    <a href="./css/img/1_4.jpg" data-fancybox="galery_0"></а>
    <a href="./css/img/1_5.jpg" data-fancybox="galery_0"></а>
    <a href="./css/img/1_6.jpg" data-fancybox="galery_0"></а>
    <a href="./css/img/1_7.jpg" data-fancybox="galery_0"></а>
    <a href="./css/img/1_8.jpg" data-fancybox="galery_0"></а>
    <a href="./css/img/1_9.jpg" data-fancybox="galery_0"></а>
    <a href="./css/img/1_9.jpg" data-fancybox="galery_1"></а>
</div>

однако последняя картинка не сушествует и все работает нормально. Но стоит мне убрать ее из контейнера как сразу же последняя картинка начинает дублироватся до 3 штук. Честно не могу понять почему я вижу такую работу библиотеки.ссылочка на проект дабы вы могли ознакомится с кодом более подробно.
wwserver.beget.tech/#about

Comments

[Александр Васильев]

В div не может быть атрибута href; где вызов слайдера (код)? Где вызов fancybox (код)?

[MaksimBuz]

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

<div class="swiper mySwiper">
    <div class="swiper-wrapper">
        <div class="swiper-slide slide_1" data-fancybox="galery_0" href="./css/img/1_1.jpg">
            <img class="slide_rout_text" src="./css/img/glass_text.png" alt="">
            <div class="slide_details">
                <p>Подробнее</p>
            </div>
        </div>
        <div class="swiper-slide slide_2" data-fancybox="galery_2" href="./css/img/main_2.jpg">
            <img class="slide_rout_text" src="./css/img/glass_text.png" alt="">
            <div class="slide_details">
                <p>Подробнее</p>
            </div>
        </div>
    </div>
    <div class="swiper-pagination"></div>

</div>
<div class="swiper-button-next"></div>
<div class="swiper-button-prev"></div>

и Собственно его настройки в js.

const swiper = new Swiper(".mySwiper", {
    slidesPerView: 3,
    variableWidth: true,
    swipeToSlide: true,
    breakpoints: {
        1024: {
            grid: {
                rows: 2,
            },
        },

        900: {
            // loop: true,
            grid: {
                rows: 2,
            },
            slidesPerView: 2,
            pagination: {
                el: ".swiper-pagination",
                clickable: true,
                dynamicBullets: true
            },
            navigation: {
                nextEl: ".swiper-button-next",
                prevEl: ".swiper-button-prev",
            },
        }
        ,
        700: {
            // loop: true,
            grid: {
                rows: 1,
            },
            slidesPerView: 2,
            pagination: {
                el: ".swiper-pagination",
                clickable: true,
                dynamicBullets: true
            },

        }
        ,
        300: {
            loop: true,

            grid: {
                rows: 1,
            },

            centerInsufficientSlides: true,
            centeredSlidesBounds: true,
            slidesPerView: 1,

            pagination: {
                el: ".swiper-pagination",
                clickable: true,
                dynamicBullets: true
            },
            rewind: true,


        }

    }
});

Буду рад получить даже просто советы по коду.

[Виталий Першин]

Не очень понимаю, что значит "последняя картинка не сушествует"?
Она существует, но принадлежит другой галереи data-fancybox="galery_1", а еще у вас эта картинка дублируется после каждой галереи и повторяется 60 раз, вы так проблему не решите

[Виталий Першин]

А еще у вас почему библиотеки подключены в последнем подключении этой картинки, у вас явно с разметкой какие-то проблемы

[Александр Васильев]

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

[MaksimBuz]

Вот почему библиотеки подключаются где то не в том месте я лично понять не могу. Приложу изображение кода что библиотеки вынесены отдельно. Насчет data-fancybox="galery_1" вот она как раз таки и решает проблему но я четко уверен что по хорошему нужно сделать все по уму а не вот этот костыль , который я придумал в попытке хоть как то это починить.

[Виталий Першин]

MaksimBuz, потому что где-то выше не закрытый тег. Решайте проблемы последовательно, у вас даже редактор не может отформатировать разметку.

[IvanU7n]

закрывается a на кириллице

[MaksimBuz]

IvanU7n, Я получается тег ссылки сделал на кирилице?

[IvanU7n]

MaksimBuz, открывается латиница, а закрывается кириллица, т.е. ссылка по сути не закрывается

[MaksimBuz]

IvanU7n, благодарю от всей души, глупая ошибка но сам бы я ее точно не нашел)