1

Подскажите решение как реализовать синхронизацию ползунка с картинками. Очевидно, но на всякий случай: Крутим ползунок вправо - слайды двигаются вправо. Ползунок влево-слайды влево

По ссылке ниже мои попытки сделать это:

https://codepen.io/st-iv/pen/NLqwqb?editors=1010

Использовал nouislider, хотел бы его синхронизировать с slick slider

var connectSlider = document.getElementById('rangeSlider');

noUiSlider.create(connectSlider, {
    start: 40,
    connect: [true, false],
    range: {
      'min': 0,
      'max': 100
    }
});

А вот есть решение с прогресс баром, может какая-то часть оттуда поможет https://codepen.io/st-iv/pen/JBmvWO?editors=1010

0

1 ответ 1

5

Решение со стандартным input type=range. Его при желании можно стилизовать как угодно(IE10+).

$('#slider').on('init reInit',function(event,slick){
  var amount = slick.slideCount;
  $('#range').attr('max',amount);
})

$('#slider').on('afterChange',function(e,slick,currentSlide){
  $('#range').val(currentSlide+1);
})

$('#range').on('input change',function(){
  $('#slider').slick('slickGoTo',this.value-1);
});

$('#slider').slick({
  slidesToShow:2,
  arrows:false,
  dots:false
})
*{
  box-sizing:border-box;
}

.slide{
  height:100px;
  line-height:100px;
  border:1px solid;
  text-align:center;
  font-size:60px;
  margin:0 5px;
}
.slick-list{
  margin:0 -5px;
}
.slick-current{
  color:red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="//cdn.jsdelivr.net/npm/[email protected]/slick/slick.min.js"></script>
<link href="//cdn.jsdelivr.net/npm/[email protected]/slick/slick.css" rel="stylesheet"/>

<div id="slider">
  <div class="slide">1</div>
  <div class="slide">2</div>
  <div class="slide">3</div>
  <div class="slide">4</div>
  <div class="slide">5</div>
</div>
<input type="range" id="range" min="1" value="1" step="1" />

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.

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