Адаптивный слайдер для сайта

297

05 декабря 2017, 19:58

Ребята задача такая, слайдер зациклен, переключение слайдера должно быть при помощи нижнего меню в самом нижу на картинке и также prev и next (стрелками). Индикаторы вверху по возможности. При этом всем должна быть адаптивность. Помогите пожалуйста решить данную задачку.

Answer 1

$('.slider-nav').slick({ 
  dots: true, 
  infinite: true, 
  speed: 500, 
  fade: true, 
  cssEase: 'linear' 
});  	 
       
 $('a[data-slide]').click(function(e) { 
   e.preventDefault(); 
   var slideno = $(this).data('slide'); 
   $('.slider-nav').slick('slickGoTo', slideno - 1); 
 }); 
   
 $('.slider-nav').on('beforeChange', function(event, slick, currentSlide, nextSlide, index) {    
  var a = nextSlide +1;   
  $('a[data-slide]').removeClass("active"); 
   
  if($(this).find('.slick-slide').hasClass('slick-active')==true){ 
    $('a[data-slide="'+a+'"]').addClass("active"); 
  }  
   
   
});

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; 
  margin:100px auto; 
  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; 
}

<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"> 
    <a href="#" data-slide="2">Рулоны</a> 
    <a href="#" data-slide="3">Бумага</a> 
    <a href="#" data-slide="4">Диспенсеры</a> 
  </div> 
</div>