CODEWITHSUNDEEP
jquery
sameed ul hassan
sameed ul hassan

Reputation: 115

Changing jquery with respect to screen sizes

I am using slick slider and I want to make it responsive but I'm unable to do so.

I tried to do the task by these two ways which I found on internet but it didn't work for me Here is my code,That's One way I found 

 $(document).ready(function(){
 if(window.width() <= 320)
 {
     $('.slick').slick({
      slidesToShow: 2,
      slidesToScroll: 1,
  });
 }

 else if(window.width() <= 480)
 {
     $('.slick').slick({
      slidesToShow: 2,
      slidesToScroll: 1,
  });
 }

 else if(window.width() <= 542)
 {
     $('.slick').slick({
      slidesToShow: 3,
      slidesToScroll: 1,
  });
 }

 else if(window.width() <= 768)
 {
     $('.slick').slick({
      slidesToShow: 4,
      slidesToScroll: 1,
  });
 }

 else{
     $('.slick').slick({
      slidesToShow: 5,
      slidesToScroll: 1,
  });
 }

});

That's the other way using resize function

 $(document).resize(function(e){
 if(window.width() <= 320)
 {
     $('.slick').slick({
      slidesToShow: 2,
      slidesToScroll: 1,
  });
 }

 else if(window.width() <= 480)
 {
     $('.slick').slick({
      slidesToShow: 2,
      slidesToScroll: 1,
  });
 }

 else if(window.width() <= 542)
 {
     $('.slick').slick({
      slidesToShow: 3,
      slidesToScroll: 1,
  });
 }

 else if(window.width() <= 768)
 {
     $('.slick').slick({
      slidesToShow: 4,
      slidesToScroll: 1,
  });
 }

 else{
     $('.slick').slick({
      slidesToShow: 5,
      slidesToScroll: 1,
  });
 }

});

What i want is slider show 5 posts on large screen, 4 posts on medium screen, 3 posts on small screen and 2 posts on extra small screen, Please help me where i'm wrong or if any better approach than this I'll be very thankful to you.

Upvotes: 0

Views: 475

Answers (1)

T. Dirks
T. Dirks

Reputation: 3676

Have a look at this snippet. The main two problems were that you user window.width() instead of $(window).width() and that you need to 'unslick' the slider first before you can 'reslick' it.

Beware though before you can 'unslick' the slider, it needs to be 'slicked' first. That's why I use the $(document).ready() to give it the default slick() and after that I call $(window).resize(); to 'slick' it to the right proportion

$(document).ready(() => {
  $('div.slick').slick();
  $(window).resize();
});


$(window).resize(function(e){
  if($(window).width() <= 320)
  {
    $('div.slick').slick('unslick');
    $('div.slick').slick({
      slidesToShow: 2,
      slidesToScroll: 1,
    });
  }

  else if($(window).width() <= 480)
  {
    $('div.slick').slick('unslick');
    $('.slick').slick({
      slidesToShow: 2,
      slidesToScroll: 1,
    });
  }

  else if($(window).width() <= 542)
  {
    $('div.slick').slick('unslick');
    $('.slick').slick({
      slidesToShow: 3,
      slidesToScroll: 1,
    });
  }

  else if($(window).width() <= 768)
  {
    $('div.slick').slick('unslick');
    $('.slick').slick({
      slidesToShow: 4,
      slidesToScroll: 1,
    });
  }

  else{
    $('div.slick').slick('unslick');
    $('.slick').slick({
      slidesToShow: 5,
      slidesToScroll: 1,
    });
  }

});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/npm/[email protected]/slick/slick.css"/>
<script type="text/javascript" src="//cdn.jsdelivr.net/npm/[email protected]/slick/slick.min.js"></script>

<div class="slick">
  <div>your content1</div>
  <div>your content2</div>
  <div>your content3</div>
  <div>your content4</div>
  <div>your content5</div>
  <div>your content6</div>
  <div>your content7</div>
  <div>your content8</div>
  <div>your content9</div>
</div>

Upvotes: 1

Related Questions