1

Как добавить миниатюры к slick слайдеру(маленькие картинки слайдов, как правило, снизу слайдера, при клике на которые слайдер переключается на соответствующую картинку, как здесь: http://fotorama.io/ )? Что добавить к коду?

$(document).ready(function() {
        $('.main-slider').slick({
              lazyLoad: 'ondemand',
              slidesToShow: 1,
              slidesToScroll: 1,
              autoplay: true,
              autoplaySpeed: 8000,
              infinite: true, 
              dots: false,
              speed: 800,
              fade: true,
              pauseOnHover: false
          });
        });
4
  • Что Вы подразумеваете под "миниатюрами"? 14 мар 2018 в 18:51
  • маленькие картинки слайдов, как правило, снизу слайдера, при клике на которые слайдер переключается на соответствующую картинку.
    – EasyTactic
    14 мар 2018 в 18:56
  • Это dots - измените false на true и с помощью css кастомизируйте точки так, чтобы они стали миниатюрами (увеличьте размер, вставьте в качестве фона соответствующие картинки и т.д.). Исходные стили dots - в slick-theme.css, меняйте их по своему усмотрению. 14 мар 2018 в 19:08
  • Спасибо. Я, правда, надеялся, что это полегче делается, но тем не менее.))
    – EasyTactic
    14 мар 2018 в 19:10

3 ответа 3

1

У slick slider есть свойство custom paging, напишите data-image в каждый слайд и соберите кастомные булеты (в вашем случае картинки)

$(".slider").slick({
    customPaging : function(slider, i) {
        var thumb = $(slider.$slides[i]).data('image');
        return '<a href="#"><img src="'+thumb+'"></a>';
    },

   
});

1

Вариант связать 2 слайдера:

$('.slider-win').slick({
  slidesToShow: 1,
  slidesToScroll: 1,
  asNavFor: '.slider-controll',
  arrows: false,
  dots: false,
  infinite: true,
  focusOnSelect: true,
  fade: true,
  cssEase: 'linear',
  
});

$('.slider-controll').slick({
  slidesToShow: 3,
  slidesToScroll: 1,
  arrows: false,
  vertical: false,
  dots: false,
  infinite: true,
  asNavFor: '.slider-win',
  focusOnSelect: true,
  centerMode: false,
  variableWidth: true
});
* {
  box-sizing: border-box;
}

html,
body {
  padding: 0;
  margin: 0;
}

img {
  max-width: 100%;
}

.slider-controll .slick-slide {
  width: 150px;
  height: 150xp;
  cursor:pointer;
  border:2px solid transparent;
}

.slider-controll .slick-slide img {
  width: 100%;
  height: 100%;
  object-fit:cover;
  display: block;
}

.slider-controll .slick-slide.slick-current {
  border-color: skyblue;
}
<script src="https://code.jquery.com/jquery-2.2.4.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.min.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.min.js"></script>

<div class="slider-win">
  <img src="https://images.unsplash.com/photo-1544801568-5ec5a66bf3fa?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=600&q=60" alt="">
  <img src="https://images.unsplash.com/photo-1517327258734-375b7a2aa8d5?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjI0MX0&auto=format&fit=crop&w=1051&q=80" alt="">
  <img src="https://images.unsplash.com/photo-1523053511548-d31e5927fb25?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=750&q=80" alt="">
  <img src="https://images.unsplash.com/photo-1524701370974-bf337323869d?ixlib=rb-1.2.1&auto=format&fit=crop&w=600&q=60" alt="">
</div>
  
<div class="slider-controll">
  <img src="https://images.unsplash.com/photo-1544801568-5ec5a66bf3fa?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=600&q=60" alt="">
  <img src="https://images.unsplash.com/photo-1517327258734-375b7a2aa8d5?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjI0MX0&auto=format&fit=crop&w=1051&q=80" alt="">
  <img src="https://images.unsplash.com/photo-1523053511548-d31e5927fb25?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=750&q=80" alt="">
  <img src="https://images.unsplash.com/photo-1524701370974-bf337323869d?ixlib=rb-1.2.1&auto=format&fit=crop&w=600&q=60" alt="">
</div>

Или вариант с обычной навигацией по слайдам:

var $Slider = $('.slider-win').slick({
  slidesToShow: 1,
  slidesToScroll: 1,
  arrows: false,
  dots: false,
  infinite: false,
  focusOnSelect: true,
  fade: true,
  cssEase: 'linear',

});

$('.slider-item').on('click', function(e) {

  var slideIndex = $(this).data('item');
  
  $(this).addClass('on').siblings().removeClass('on');

  $Slider.slick( 'slickGoTo', parseInt( slideIndex ) - 1 );

  e.preventDefault();
});
* {
  box-sizing: border-box;
}

html,
body {
  padding: 0;
  margin: 0;
}

img {
  max-width: 100%;
}

.slider-controll {
  display: flex;
}

.slider-item {
  width: 150px;
  height: 150xp;
  cursor:pointer;
  border:2px solid transparent;
}

.slider-item img {
  width: 100%;
  height: 100%;
  object-fit:cover;
  display: block;
}

.slider-item.on {
  border-color: skyblue;
}
<script src="https://code.jquery.com/jquery-2.2.4.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.min.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.min.js"></script>

<div class="slider-win">
  <img src="https://images.unsplash.com/photo-1544801568-5ec5a66bf3fa?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=600&q=60" alt="">
  <img src="https://images.unsplash.com/photo-1517327258734-375b7a2aa8d5?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjI0MX0&auto=format&fit=crop&w=1051&q=80" alt="">
  <img src="https://images.unsplash.com/photo-1523053511548-d31e5927fb25?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=750&q=80" alt="">
  <img src="https://images.unsplash.com/photo-1524701370974-bf337323869d?ixlib=rb-1.2.1&auto=format&fit=crop&w=600&q=60" alt="">
</div>
  
<div class="slider-controll">
  <div class="slider-item" data-item="1"><img src="https://images.unsplash.com/photo-1544801568-5ec5a66bf3fa?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=600&q=60" alt=""></div>
  <div class="slider-item" data-item="2"><img src="https://images.unsplash.com/photo-1517327258734-375b7a2aa8d5?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjI0MX0&auto=format&fit=crop&w=1051&q=80" alt=""></div>
  <div class="slider-item" data-item="3"><img src="https://images.unsplash.com/photo-1523053511548-d31e5927fb25?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=750&q=80" alt=""></div>
  <div class="slider-item" data-item="4"><img src="https://images.unsplash.com/photo-1524701370974-bf337323869d?ixlib=rb-1.2.1&auto=format&fit=crop&w=600&q=60" alt=""></div>
</div>

0

можно еще 1 слайдер синхронизировать сделать вот в официальной документации написано http://kenwheeler.github.io/slick/ Slider Syncing называется. Почитайте очень все понятно написано и просто, как мне кажется проще некуда.

$('.slider-for').slick({
  slidesToShow: 1,
  slidesToScroll: 1,
  arrows: false,
  fade: true,
  asNavFor: '.slider-nav'
});
$('.slider-nav').slick({
  slidesToShow: 3,
  slidesToScroll: 1,
  asNavFor: '.slider-for',
  dots: true,
  centerMode: true,
  focusOnSelect: true
});

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.