CODEWITHSUNDEEP
javascriptjqueryhtmlcss
user6224087
user6224087

Reputation:

Detecting screen size with jQuery and change property

I am using a Slick slider/carousal and displaying six items currently. Now what I want to do is I want the script to detect if the browser has been resized or viewed from a smaller screen (say below 768px) then the number of items displayed should change to 3. This is a perfect replica of the media query function in CSS which detects the screen size for making the website responsive. Just the same thing I want to be performed in my jQuery function but I have never done so. Here is my script:

<script src="https://code.jquery.com/jquery-2.2.0.min.js" type="text/javascript"></script>
<script src="http://kenwheeler.github.io/slick/slick/slick.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
jQuery.noConflict();
jQuery(document).on('ready', function() {
    jQuery(".center").slick({
        dots: true,
        infinite: true,
        centerMode: true,
        slidesToShow: 6,
        slidesToScroll: 6
    });
});
</script>

Upvotes: 1

Views: 80

Answers (1)

Rahul Kumar
Rahul Kumar

Reputation: 154

The plugin has already way to update the options on different view ports. Please have a look at this. Hope this will help you.

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

Upvotes: 1

Related Questions