CODEWITHSUNDEEP
javascriptjqueryresponsive-designcarousel
user1406737
user1406737

Reputation: 175

Only use slick.js on mobile screen size

I only want the slick.js plugin to be active when on a mobile screen size, let's say under 450px for example. I want this to happen on either page load or browser resize. Slick.js does work properly if I load the page or resize to the correct width but not if I resize the browser to greater than 450px. Can this be done? 

   $(document).ready(function(){
    $(window).resize(function(){
      if($(window).width() < 450) {
        $('.round-card-slick').slick({
        });
      } else {
        $('.round-card-slick').unslick();
      }
    });
  });

Upvotes: 9

Views: 39139

Answers (8)

Akshay Dalvi
Akshay Dalvi

Reputation: 41

Match Media 🤘

if (window.matchMedia("(max-width: 767px)").matches) {
  /* the viewport is less than 768 pixels wide */
  $('.slider').slick();
}

Upvotes: 0

Tristanisginger
Tristanisginger

Reputation: 2683

Set a breakpoint in the options to unslick the slider then on resize (with a timeout to stop it firing loads) slick it again if it's not already initialised`

const options = {
    mobileFirst: true, 
    responsive: [
        {
            breakpoint: 450,
            settings: "unslick"
        }
    ]
};

var slicky = $('some-slick-widget');
slicky.slick(options);

$(window).resize(function () {

    setTimeout(function () {
           
        if($(window).width() < 450 && ! slicky.hasClass("slick-initialized")) {
            slicky.slick(options);
        }
    }, 100);
});

Upvotes: 0

Parveen Jangra
Parveen Jangra

Reputation: 1

you can use this code

$(document).ready(function(){
$(window).resize(function(){
  if($(window).width() < 450) {
    $('.round-card-slick').slick({
    });
  } else {
    $('.round-card-slick').slick('unslick');
  }
});

});

Upvotes: 0

ilibilibom
ilibilibom

Reputation: 515

I found for some reason that when I have the mobileFirst: true set it works the opposite than what I would expect. Here's what worked for me (displaying the slider only on mobile) 

mobileFirst: true 
responsive: [
            {
                breakpoint: 2000,
                settings: "unslick"
            },
            {
                breakpoint: 1600,
                settings: "unslick"
            },
            {
                breakpoint: 1024,
                settings: "unslick"
            },
            {
                breakpoint: 600,
                settings: "unslick"
            },
            {
                breakpoint: 480,
                settings: {
                    slidesToShow: 1,
                    slidesToScroll: 1
                }
            } ```

Upvotes: 0

James Daly
James Daly

Reputation: 1406

btw now you can do this directly in the slick responsive settings object

mobileFirst: true, 
responsive: [
   {
      breakpoint: 480,
      settings: "unslick"
   }
]

Upvotes: 24

DriftwoodJP
DriftwoodJP

Reputation: 41

Here's how I'd go about it: https://codepen.io/DriftwoodJP/pen/exxgxK

var init = {
  autoplay: true,
  infinite: true,
  cssEase: "linear",
  slidesToShow: 1,
  slidesToScroll: 1 };


$(function () {
  var win = $(window);
  var slider = $(".slider");

  win.on("load resize", function () {
    if (win.width() < 576) {
      slider.not(".slick-initialized").slick(init);
    } else if (slider.hasClass("slick-initialized")) {
      slider.slick("unslick");
    }
  });
});

Upvotes: 1

user1406737
user1406737

Reputation: 175

The problem is unslick keeps firing on resize even after it has been unslicked, which in turn, breaks it. A work around that my coworker came up with goes like this check..

var target = $('.slick-mobile-gallery');
if(target.hasClass('slick-initialized'))
  target.unslick();

Update:

The solution is built-in feature in slick plugin & @James Daly's answer is the true answer to this question.

Upvotes: 3

animatedgif
animatedgif

Reputation: 1109

Your problem is that the function is not run on page load because it's only setup to be called on window resize.

$(document).ready(function () {
  var $window = $(window)
    , $card = $('.round-card-slick')
    , toggleSlick;

  toggleSlick = function () {
    if ($window.width() < 450) {
      $card.slick();
    } else {
      $card.unslick();
    }
  }

  $window.resize(toggleSlick);
  toggleSlick();
});

To take this one step further it would be a very good idea to throttle the window.resize callbacks so that toggleSlick is only called every 500ms or so.

Upvotes: 0

Related Questions