Slick slider с ползунком

150

15 ноября 2018, 20:20

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

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

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

Answer 1

Решение со стандартным 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/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 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" />