When initializing the slider, in order to make the sliders scroll cyclically, it creates additional slides clones. Therefore, 16 slides are displayed in the fanbox instead of 8. And the infinite: true parameter is needed. This is the slider initialization.

$(".slider_3").not(".slick-initialized").slick({ dots: false, arrows: true, autoplay: true, swipeToSlide: true, infinite: true, autoplaySpeed: 5000, speed: 1200, slidesToShow: 4, slidesToScroll: 1, responsive: [ { breakpoint: 1240, settings: { slidesToShow: 3, slidesToScroll: 1 } }, { breakpoint: 900, settings: { slidesToShow: 2, slidesToScroll: 1 } }, { breakpoint: 630, settings: { slidesToShow: 1, slidesToScroll: 1 } } ] });

Here is the HTML slider

  <div class="slider_3"> <div class="slide"> <a href="img/362_25.jpg" class="sertificate" data-fancybox="fancybox_2" > <div class="green-icon"></div> <div class="img-box"> <img src="img/362_25.jpg" alt="" /> </div> <p>Managment System Certificate</p> </a> </div> <div class="slide"> <a href="img/362_26.jpg" class="sertificate" data-fancybox="fancybox_2" > <div class="green-icon"></div> <div class="img-box"> <img src="img/362_26.jpg" alt="" /> </div> <p>Managment System Certificate</p> </a> </div> <div class="slide"> <a href="img/362_27.jpg" class="sertificate" data-fancybox="fancybox_2" > <div class="green-icon"></div> <div class="img-box"> <img src="img/362_27.jpg" alt="" /> </div> <p>Managment System Certificate</p> </a> </div> <div class="slide"> <a href="img/362_24.jpg" class="sertificate" data-fancybox="fancybox_2" > <div class="green-icon"></div> <div class="img-box"> <img src="img/362_24.jpg" alt="" /> </div> <p>Managment System Certificate</p> </a> </div> <div class="slide"> <a href="img/362_25.jpg" class="sertificate" data-fancybox="fancybox_2" > <div class="green-icon"></div> <div class="img-box"> <img src="img/362_25.jpg" alt="" /> </div> <p>Managment System Certificate</p> </a> </div> <div class="slide"> <a href="img/362_26.jpg" class="sertificate" data-fancybox="fancybox_2" > <div class="green-icon"></div> <div class="img-box"> <img src="img/362_26.jpg" alt="" /> </div> <p>Managment System Certificate</p> </a> </div> <div class="slide"> <a href="img/362_27.jpg" class="sertificate" data-fancybox="fancybox_2" > <div class="green-icon"></div> <div class="img-box"> <img src="img/362_27.jpg" alt="" /> </div> <p>Managment System Certificate</p> </a> </div> <div class="slide"> <a href="img/362_24.jpg" class="sertificate" data-fancybox="fancybox_2" > <div class="green-icon"></div> <div class="img-box"> <img src="img/362_24.jpg" alt="" /> </div> <p>Managment System Certificate</p> </a> </div> </div>

It is necessary that in Fansibox there are as many slides as specified in HTML. How to do it ?

    1 answer 1

    You need to create a gallery not through data-fancybox

     //инициализируем галерею ДО запуска слайдера var gallery = $('.slide a'); //при клике на ссылку в слайде запускаем галерею $('.slide a').on('click', function(e) { e.preventDefault(); //узнаём индекс слайда без учёта клонов var totalSlides = +$(this).parents('.slider').slick("getSlick").slideCount, dataIndex = +$(this).parents('.slide').data('slick-index'), trueIndex; switch(true){ case (dataIndex<0): trueIndex = totalSlides+dataIndex; break; case (dataIndex>=totalSlides): trueIndex = dataIndex%totalSlides; break; default: trueIndex = dataIndex; } //вызывается элемент галереи, соответствующий индексу слайда $.fancybox.open(gallery,{}, trueIndex); return false; }); $('.slider').slick({ slidesToShow: 3, arrows: true, dots: true, customPaging: function() { return '' } }); 
     * { box-sizing: border-box; } .slider { padding: 15px; } .slider .slick-list { margin: 0 -10px; } .slide { margin: 0 10px; } .slide a { display: block; } .slide img { display: block; width: 100%; height: 200px; object-fit: cover; object-position: center; } .slick-dots { text-align: center; } .slick-dots li { display: inline-block; width: 10px; height: 10px; border: 1px solid black; border-radius: 50%; margin: 0 7px; } .slick-dots .slick-active { background-color: #000; } 
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.3.5/jquery.fancybox.min.js"></script> <link href="https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.3.5/jquery.fancybox.min.css" rel="stylesheet" /> <script src="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.min.js"></script> <link href="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.css" rel="stylesheet" /> <div class="slider"> <div class="slide"> <a href="http://www.placecage.com/c/1000/600"> <img src="http://www.placecage.com/c/1000/600" /> </a> </div> <div class="slide"> <a href="https://upload.wikimedia.org/wikipedia/commons/thumb/b/be/Bliss_location%2C_Sonoma_Valley_in_2006.jpg/300px-Bliss_location%2C_Sonoma_Valley_in_2006.jpg"> <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/b/be/Bliss_location%2C_Sonoma_Valley_in_2006.jpg/300px-Bliss_location%2C_Sonoma_Valley_in_2006.jpg"> </a> </div> <div class="slide"> <a href="https://cdn.newsapi.com.au/image/v1/9fdbf585d17c95f7a31ccacdb6466af9"> <img src="https://cdn.newsapi.com.au/image/v1/9fdbf585d17c95f7a31ccacdb6466af9" /> </a> </div> <div class="slide"> <a href="https://i-cdn.phonearena.com/images/article/50441-image/Hey-were-not-trying-to-pick-you-up-were-just-snapping-a-picture-using-Google-Glass.jpg"> <img src="https://i-cdn.phonearena.com/images/article/50441-image/Hey-were-not-trying-to-pick-you-up-were-just-snapping-a-picture-using-Google-Glass.jpg" /> </a> </div> <div class="slide"> <a href="https://ichef.bbci.co.uk/childrens-responsive-ichef-ck/400xn/amz/cbeebies/teletubbies-map-hero.jpg"> <img src="https://ichef.bbci.co.uk/childrens-responsive-ichef-ck/400xn/amz/cbeebies/teletubbies-map-hero.jpg" /> </a> </div> </div>