3

Как заменить стандартные точки в Slick Slider на свои? введите сюда описание изображения

HTML:

<div class="slider">

  <div class="container">
    <div class="row">
      <div class="col-lg-2 offset-1">
        <img src="img/sliders/reviews/it01s.jpg" alt="">
      </div>
      <div class="col-lg-5">
        <h3><span>Ирина Андреева,</span> г. Харьков</h3>
        <p>
          Спасибо большое  за помощь в получении визы!
          У меня была такая ситуация что нам нужна была виза после отказа. Другие фирмы нам предлагали всякие аферы с визами. А здесь сделали нам визу после отказа поляков и сделали польскую визу на год. Спасибо большое
        </p>
      </div>
      <div class="col-lg-3">

        <img src="img/sliders/reviews/scan01.jpg" alt="">
      </div>
    </div>
  </div>

  <div class="container">
    <div class="row">
      <div class="col-lg-2 offset-1">
        <img src="img/sliders/reviews/it01s.jpg" alt="">
      </div>
      <div class="col-lg-5">
        <h3><span>Ирина Андреева,</span> г. Харьков</h3>
        <p>
          Спасибо большое  за помощь в получении визы!
          У меня была такая ситуация что нам нужна была виза после отказа. Другие фирмы нам предлагали всякие аферы с визами. А здесь сделали нам визу после отказа поляков и сделали польскую визу на год. Спасибо большое
        </p>
      </div>
      <div class="col-lg-3">
        <img src="img/sliders/reviews/scan01.jpg" alt="">
      </div>
    </div>
  </div>


</div>

JS:

$('.slider').slick();

Переключение: PS: в переменной item находится номер слайда

 $('.sl-ctr img').click(function() {
    $('.sl-ctr img').removeClass('sl-line-active');
    $(this).addClass('sl-line-active');
    var item = $(this).attr('data-item');

  });

Проект выгрузил на свой хост - http://test.tetkaadj.com

1 ответ 1

4

Можно воспользоваться опцией(методом) customPaging и функцией выводить картинку из слайда в навигацию.

$('.slider').slick({
  arrows: false,
  dots: true,
  dotsClass: 'slick-dots slider__dots',
  customPaging: function(slick, index) {
    var image = $(slick.$slides[index]).find('.slider__img').attr('src');
    return '<img src="' + image + '" alt="" /> '
  }
})
.slick-initialized .slider__item.slick-slide {
  display: flex;
  align-items: flex-start;
}

.slider__img {
  width: 100px;
  margin: 0 10px 0 0;
  flex: 0 0 auto;
}

.slider__dots {
  list-style: none;
  margin: 30px 0 0;
  text-align: center;
}

.slider__dots li {
  display: inline-block;
  margin: 0 10px;
  border: 1px solid transparent;
}

.slider__dots .slick-active {
  border-color: red;
}

.slider__dots img {
  width: 40px;
  height: 40px;
  object-fit: cover;
  object-position: center;
  display: block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.css" rel="stylesheet" />
<script src="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.min.js"></script>
<div class="slider">
  <div class="slider__item">
    <img class="slider__img" src="//test.tetkaadj.com/img/sliders/reviews/it01s.jpg">
    <div class="slider__text">Спасибо большое за помощь в получении визы! У меня была такая ситуация что нам нужна была виза после отказа. Другие фирмы нам предлагали всякие аферы с визами. А здесь сделали нам визу после отказа поляков и сделали польскую визу на год. Спасибо большое</div>
  </div>
  <div class="slider__item">
    <img class="slider__img" src="//test.tetkaadj.com/img/sliders/reviews/it02.jpg" />
    <div class="slider__text">Спасибо большое за помощь в получении визы! У меня была такая ситуация что нам нужна была виза после отказа. Другие фирмы нам предлагали всякие аферы с визами. А здесь сделали нам визу после отказа поляков и сделали польскую визу на год. Спасибо большое</div>
  </div>
</div>

1

Ваш ответ

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

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