Прокрутка Слайдера ползунком

283

09 декабря 2017, 07:23

Здравствуйте какая задача))) Нужно подвязать ползунок к slick слайдеру чтобы при перетягивании ползунка слайдер вращался)) Если нужно будет предоставить еще что-то пишите))) Заранее Очень сильно Благодарю!!!

Использую jquery-3.2.1.min.js, jquery-ui.min.js, slick.js.

Answer 1

$('.slider-nav').slick({  
  infinite: true, 
  speed: 500, 
  fade: true, 
  cssEase: 'linear' 
});  	 
       
 $('input[type="range"]').on("input change", function(e){ 
 e.preventDefault(); 
   var slideno = $(this).val();  
   $('.slider-nav').slick('slickGoTo', slideno-1 ); 
 });

body{ 
  background:#ccc; 
} 
.main { 
  font-family:Arial; 
  width:500px; 
  display:block; 
  margin:0 auto; 
} 
h3 { 
    background: #fff; 
    color: #3498db; 
    font-size: 36px; 
    line-height: 100px; 
    margin: 10px; 
    padding: 2%; 
    position: relative; 
    text-align: center; 
} 
.action{ 
  display:block;  
  width:100%; 
  text-align:center; 
} 
.action a { 
  display:inline-block; 
  padding:5px 10px;  
  background:#f30; 
  color:#fff; 
  text-decoration:none; 
} 
.action a:hover{ 
  background:#000; 
} 
 
a.active { 
    background: #00ff45 !important; 
} 
.slider.slider-nav.slick-initialized.slick-slider { 
    margin: 0; 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.5.9/slick.min.js"></script> 
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.5.9/slick-theme.min.css"> 
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.5.9/slick.min.css"> 
  
 
 
<div class="main">  
  <div class="slider slider-nav"> 
    <div><h3>1</h3></div> 
    <div><h3>2</h3></div> 
    <div><h3>3</h3></div> 
    <div><h3>4</h3></div> 
    <div><h3>5</h3></div> 
  </div> 
  <div class="action"> 
  <input type="range" min="1" max="5"  value="0" step="1"> 
  </div> 
</div>