Slick слайдер и Fancybox

254

21 сентября 2018, 23:40

При инициализации слайдер, для того чтобы делать прокрутку слайдеров цикличной, создает дополнительные слайды клоны. Поэтому в фансибоксе отображаются 16 слайдов вместо 8. А параметр infinite: true нужен. Это инициализация слайдера

$(".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
              }
            }
          ]
    });

Вот HTML слайдера

                    <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>

Нужно чтобы в Фансибоксе было четко столько слайдов сколько задано в HTML. Как это сделать ?

Answer 1

Нужно создать галерею не через 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>

ПОСЛЕДНИЕ ВОПРОСЫ

Все вопросы

ТОП-10

Все популярные вопросы

div растягивает картинку внутри img

Есть div, который имеет ширину 400px, и в нем есть тег imgКогда я загружаю квадратную картинку, он ее растягивает, а мне нужно, чтобы она было не растянута

206

jQuery

Как сделать чтобы иконка становилось активной на jquery? [закрыт]

191

jQuery

Как сделать такой эффект при ховере? [закрыт]

Справа нормальный вид, слева при ховере

165

jQuery

Передача данных через Django REST API

Прошу помощи

188