Slick Slider отзывчивое количество продуктов на слайд

Question

Мой вопрос заключается в наиболее эффективном способе отображения ряда продуктов на слайд, а затем, когда наступают точки быстрого реагирования, уменьшаются столбцы, а продукты на слайд также уменьшаются. Тогда будет увеличение количество слайдов при разбивке по размеру экрана.

Итак, если мы начнем с 2-х рядов по 4 продукта на слайд, то в среднем мы показываем 2 столбца с 3 (6 продуктами на слайд), а затем на мобильных устройствах, 2 столбца с 2 продуктами слайда (4 Всего).

Мы можем написать несколько JS для изменения размера и вырезания обложек слайдов и переопределить обертки для получения желаемых результатов.

Другой способ заключается в том, чтобы выполнить запрос сервера на изменение размера для записи данных (неважно, как это может потребоваться).

Я положил JSFiddle, чтобы показать, как конечный результат будет выглядеть как для каждого окна просмотра.

<div class="slider"> 
    <ul class="fullslider"> 
     <!-- Start Slide One --> 
     <div class="single-product"><img src="http://placekitten.com/400/400"></div> 
     <div class="single-product"><img src="http://placekitten.com/400/400"></div> 
     <div class="single-product"><img src="http://placekitten.com/400/400"></div> 
     <div class="single-product"><img src="http://placekitten.com/400/400"></div> 
     <!-- End Slide One on Mobile --> 
     <div class="single-product"><img src="http://placekitten.com/400/400"></div> 
     <div class="single-product"><img src="http://placekitten.com/400/400"></div> 
     <!-- End Slide One on Tablet --> 
     <div class="single-product"><img src="http://placekitten.com/400/400"></div> 
     <div class="single-product"><img src="http://placekitten.com/400/400"></div> 
     <!-- End Slide One on Desktop --> 
     <div class="single-product"><img src="http://placekitten.com/400/400"></div> 
     <div class="single-product"><img src="http://placekitten.com/400/400"></div> 
     <div class="single-product"><img src="http://placekitten.com/400/400"></div> 
     <div class="single-product"><img src="http://placekitten.com/400/400"></div> 
     <div class="single-product"><img src="http://placekitten.com/400/400"></div> 
     <div class="single-product"><img src="http://placekitten.com/400/400"></div> 
     <div class="single-product"><img src="http://placekitten.com/400/400"></div> 
     <div class="single-product"><img src="http://placekitten.com/400/400"></div> 
     <div class="single-product"><img src="http://placekitten.com/400/400"></div> 
     <div class="single-product"><img src="http://placekitten.com/400/400"></div> 
     <div class="single-product"><img src="http://placekitten.com/400/400"></div> 
     <div class="single-product"><img src="http://placekitten.com/400/400"></div> 
     <div class="single-product"><img src="http://placekitten.com/400/400"></div> 
     <div class="single-product"><img src="http://placekitten.com/400/400"></div> 
     <div class="single-product"><img src="http://placekitten.com/400/400"></div> 
     <div class="single-product"><img src="http://placekitten.com/400/400"></div> 
    </ul> 
    </div> 

Answer 1

Наиболее эффективный и чистый способ сделать то, что я думаю, что вы пытаетесь достичь, чтобы использовать responsive установку скользкой карусели. Гораздо проще использовать настройки, предлагаемые самим плагином, чем пытаться сделать это вручную в событии resize или сделать это на стороне сервера. Это, как вы будете использовать этот параметр:

$(".fullslider").slick({ 
    slidesToShow: 4, // default desktop values 
    slidesToScroll: 4, 
    rows: 2, 
    dots: true, 
    arrows: true, 
    responsive: [ 
     { 
      breakpoint: 980, // tablet breakpoint 
      settings: { 
       slidesToShow: 3, 
       slidesToScroll: 3 
      } 
     }, 
     { 
      breakpoint: 480, // mobile breakpoint 
      settings: { 
       slidesToShow: 2, 
       slidesToScroll: 2 
      } 
     } 
    ] 
}); 

В контрольных точках представляет число пикселей в какой момент вы хотите изменить некоторые настройки. В вашем случае вы хотите изменить количество слайдов для показа и прокрутки, когда пользователь просматривает с планшета или телефона. Но вы не хотите изменять другие настройки, например rows, поэтому не устанавливайте его в точке останова settings; он будет оставаться 2.

JSFiddle example