Слайдер слайд, чтобы показать все элементы на рабочем столе, но показать x количество на экране изменить размер - PullRequest
Новая
       31

Слайдер слайд, чтобы показать все элементы на рабочем столе, но показать x количество на экране изменить размер

0 голосов
/ 06 апреля 2019

У меня есть шесть изображений в моем скользком слайдере.

  • На рабочем столе (1200px +) Я хочу отобразить все изображения подряд (что работает).
  • При ширине 992 пикселя я хочу, чтобы он отображал только 3.

Впервые использую скользящий слайдер, поэтому я не уверен, что это правильный подход: в настоящее время у меня есть один родительский div, который пытается достичь моих целей, но не уверен, что правильный подход будет содержать два div:

  • Div 1 покажет все шесть изображений подряд и затем будет скрыт на ширине 992 пикселя.
  • Div 2 будет содержать скользящий слайдер и будет отображаться с шириной 992 пикселей.

Текущий подход: 

$('.slider').slick({
    slidesToShow: 3,
    slidesToScroll: 3,
    dots: true,
    infinite: true,
    cssEase: 'linear'
});
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<link rel="stylesheet" type="text/css" href="slick/slick.css"/>
<script type="text/javascript" src="slick/slick.min.js"></script>

<div class="showcaseRow py-4" align="center">
  <div class="container-fluid">
    <div class="row justify-content-center">
 
      <div class="col-12 col-sm-12 col-md-12 col-lg-12 col-xl-12 img__container justify-content-center align-self-center">
         <div class="slider">
        	<img src="https://dummyimage.com/200x200/000/fff">
        	<img src="https://dummyimage.com/200x200/000/fff">
        	<img src="https://dummyimage.com/200x200/000/fff">
        	<img src="https://dummyimage.com/200x200/000/fff">
        	<img src="https://dummyimage.com/200x200/000/fff">
        	<img src="https://dummyimage.com/200x200/000/fff">
        </div>
      </div>

    </div>
  </div>
</div>

1 Ответ

0 голосов
/ 06 апреля 2019

Вы можете установить точки безубыточности для отзывчивых 

$('.center').slick({
    slidesToShow: 6,
    slidesToScroll: 6,
    dots: true,
    infinite: true,
    cssEase: 'linear',
  responsive: [
    {
      breakpoint: 992,
      settings: {
        slidesToShow: 3,
        slidesToScroll: 3,
      }
    },
    {
      breakpoint: 480,
      settings: {
        arrows: false,
        centerMode: true,
        centerPadding: '40px',
        slidesToShow: 1
      }
    }
  ]
});
...