Слайдер переходящий в блоки

261

24 марта 2017, 22:29

Добрый день, мне нужна помощь ваша Допустим у меня есть 10 div для слайдера и они размещены горизонтально ,а будет видно 5 div, а при следующем переходе слайдов следующие 5 div. Но когда разрешение экрана есть меньше 920px например мне нужно что бы эти все блоки был видны и били горизонтально размещены, то есть нужно при переходе на 920px убирать слайдер... Кто может помочь с такой проблемой? Может существуют такие слайдеры?

Answer 1

Например:

Есть 10 слайдов, прокручиваются по 5.
Но когда разрешение экрана есть меньше 920px (для примера просто привела не 920, а 520px), эти все блоки видны и горизонтально размещены (из вопроса).

$(window).on("load resize", function(){ 
  var width = $(document).width(); 
   
  if (width < 520) { 
    $('.slider').slick('unslick'); 
  } else { 
    $('.slider').not('.slick-initialized').slick({   
      slidesToShow: 5, 
      slidesToScroll: 5, 
      infinite: true, 
    }); 
  } 
});

.slider>div { 
  display: inline-block; 
  width: 30%; 
  padding: .5rem; 
} 
 
img { 
  max-width: 100%; 
  width: 100%; 
} 
 
* { 
  box-sizing: border-box; 
} 
 
@media screen and (min-width: 520px) { 
  .slider>div { 
    width: 100%; 
    display: block; 
    padding: 0; 
  } 
   
  .slick-slide { 
    padding: .5rem; 
  } 
}

<script src="https://code.jquery.com/jquery-2.1.4.js"></script> 
   
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick.min.css" /> 
   
  <script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick.min.js"></script> 
   
  <div class="slider"> 
    <div> 
      <img src="https://dummyimage.com/300x200/ccc/fff&text=images-1" alt=""> 
    </div> 
    <div> 
      <img src="https://dummyimage.com/300x200/ccc/fff&text=images-2" alt=""> 
    </div> 
    <div> 
      <img src="https://dummyimage.com/300x200/ccc/fff&text=images-3" alt=""> 
    </div> 
    <div> 
      <img src="https://dummyimage.com/300x200/ccc/fff&text=images-4" alt=""> 
    </div> 
    <div> 
      <img src="https://dummyimage.com/300x200/ccc/fff&text=images-5" alt=""> 
    </div> 
    <div> 
      <img src="https://dummyimage.com/300x200/ccc/fff&text=images-6" alt=""> 
    </div> 
    <div> 
      <img src="https://dummyimage.com/300x200/ccc/fff&text=images-7" alt=""> 
    </div> 
    <div> 
      <img src="https://dummyimage.com/300x200/ccc/fff&text=images-8" alt=""> 
    </div> 
    <div> 
      <img src="https://dummyimage.com/300x200/ccc/fff&text=images-9" alt=""> 
    </div> 
    <div> 
      <img src="https://dummyimage.com/300x200/ccc/fff&text=images-10" alt=""> 
    </div> 
  </div>

При меньше необходимого разрешения - $('.slider').slick('unslick'); иначе - инициализируем. .not('.slick-initialized') - честно признаюсь не объясню что значит, но решает проблемы с ошибками при ресайзе окна со слайдером.

P.S: стили только для наглядности.