1

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

3
  • kenwheeler.github.io/slick
    – SVE
    23 мар 2017 в 13:51
  • Видел такой слайдер но не могу сообразить как сделать при < 920px что бы блоки были вертикальные и фактически убрался слайдер?
    – Maksym
    23 мар 2017 в 13:57
  • Добавляете каждый див в слайд, и устанавливаете на определенные брекпоинты количество слайдов
    – And Rey
    23 мар 2017 в 14:25

1 ответ 1

2

Например:

Есть 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: стили только для наглядности.

Ваш ответ

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

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