Slick Responsive

-1

I am not able to create a responsive slick, I do not have much experience with HTML.

<div class="carousel-logistics">
    <div class="slick-logistics">
        <div class="logistics"><img class="img-fluid" src=""
            /></div>
        <div class="logistics"><img class="img-fluid" src=""
            /></div>
        <div class="logistics"><img class="img-fluid" src=""
            /></div>
        <div class="logistics"><img class="img-fluid" src=""
            /></div>
    </div>
</div>

if( $(".slick-logistics").length ){
    $(".slick-logistics p").remove();
    $(".slick-logistics").slick({
        slidesToShow: 4,
        slidesToScroll: 4,
        autoplay: true
    });
}
    
asked by anonymous 30.08.2018 / 16:01

1 answer

0

Slick has a property called responsive , there you determine how many images you want to display for each resolution, such as there is no established standard on tablets, you can stipulate manually. See:

$('.responsive').slick({
  dots: true,
  infinite: false,
  speed: 300,
  slidesToShow: 4, // aqui é o padrão
  slidesToScroll: 4,
  responsive: [
    {
      breakpoint: 1024, // aqui define até que largura será as configs abaixo
      settings: {
        slidesToShow: 3,
        slidesToScroll: 3,
        infinite: true,
        dots: true
      }
    },
  ]
});
    
30.08.2018 / 18:10