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/[email protected]/slick/slick.css" rel="stylesheet" />
<script src="//cdn.jsdelivr.net/npm/[email protected]/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 you have read our privacy policy.

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