最新消息:雨落星辰是一个专注网站SEO优化、网站SEO诊断、搜索引擎研究、网络营销推广、网站策划运营及站长类的自媒体原创博客

javascript - How can I set slick.js settings base on my windows size (Desktop, Tablet, Phone)? - Stack Overflow

programmeradmin3浏览0评论

I have a bunch of custom of HTML divs. I store 3 of them in a div with class slide. Then, I use that slide class to call the slick function and apply the settings like this:

$('.slide').slick({

    slidesToShow: 3,
    slidesToScroll: 1,
    arrows: true,

});

For those of you that don't know, here is slick.js.

My whole UI at this point look like this:

They look fine when they're in full-screen, but as soon as I decrease the windows size, they look very poor. I'm thinking to set my slick settings base on my windows size. For example,

If window size = full OR 1080px {
$('.slide').slick({

        slidesToShow: 3,
        slidesToScroll: 1,
        arrows: true,

    });

}

else if window size = medium or 720px {
$('.slide').slick({

        slidesToShow: 2,
        slidesToScroll: 1,
        arrows: true,

    });


}else{


// This is for the phone

$('.slide').slick({

        slidesToShow: 1,
        slidesToScroll: 1,
        arrows: true,

    });
}

What is the most efficient way to do achieve something like this?

Here is my JSFiddle.

I have a bunch of custom of HTML divs. I store 3 of them in a div with class slide. Then, I use that slide class to call the slick function and apply the settings like this:

$('.slide').slick({

    slidesToShow: 3,
    slidesToScroll: 1,
    arrows: true,

});

For those of you that don't know, here is slick.js.

My whole UI at this point look like this:

They look fine when they're in full-screen, but as soon as I decrease the windows size, they look very poor. I'm thinking to set my slick settings base on my windows size. For example,

If window size = full OR 1080px {
$('.slide').slick({

        slidesToShow: 3,
        slidesToScroll: 1,
        arrows: true,

    });

}

else if window size = medium or 720px {
$('.slide').slick({

        slidesToShow: 2,
        slidesToScroll: 1,
        arrows: true,

    });


}else{


// This is for the phone

$('.slide').slick({

        slidesToShow: 1,
        slidesToScroll: 1,
        arrows: true,

    });
}

What is the most efficient way to do achieve something like this?

Here is my JSFiddle.

Share Improve this question edited Jan 27, 2017 at 20:58 halfer 20.3k19 gold badges109 silver badges202 bronze badges asked Apr 2, 2015 at 1:22 code-8code-8 58.8k120 gold badges390 silver badges666 bronze badges
Add a ment  | 

1 Answer 1

Reset to default 8

According to the official document, it can be pretty easy.

$('.responsive').slick({
  dots: true,
  infinite: false,
  speed: 300,
  slidesToShow: 4,
  slidesToScroll: 4,
  responsive: [
    {
      breakpoint: 1024,
      settings: {
        slidesToShow: 3,
        slidesToScroll: 3,
        infinite: true,
        dots: true
      }
    },
    {
      breakpoint: 600,
      settings: {
        slidesToShow: 2,
        slidesToScroll: 2
      }
    },
    {
      breakpoint: 480,
      settings: {
        slidesToShow: 1,
        slidesToScroll: 1
      }
    }
    // You can unslick at a given breakpoint now by adding:
    // settings: "unslick"
    // instead of a settings object
  ]
});
发布评论

评论列表(0)

  1. 暂无评论