Slick Responsive

Asked

Viewed 132 times

-1

I’m not able to create a responsive Slick, I don’t 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
    });
}
javascript

  • Describe the problem better, you can not understand very well your doubt.

  • I would like that when it arrived in the resolution of tablet the Carousel shows 2 images

1 answer

0

The Slick owns a property called responsive, There you determine the amount of images you want to display for each resolution, as there is no standard set on tablets, you can stipulate manually. Behold:

$('.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
      }
    },
  ]
});

Browser other questions tagged javascript

You are not signed in. Login or sign up in order to post.