New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Reinit slider when leaving a breakpoint with settings: 'unslick' #1190

Closed
alexej-d opened this Issue Mar 29, 2015 · 4 comments

Comments

Projects
None yet
5 participants
@alexej-d

alexej-d commented Mar 29, 2015

Hey there,
really love your plugin, I use it in nearly every project – thanks for the great work.
I observed a counter-intuitive behaviour with the following init code:

    var slickBaseSettings = {
        infinite: false,
        slide: '.is-slide',
        adaptiveHeight: true,
        dots: false,
        slidesToShow: 4, 
        arrows: true
    };
    $('.is-slider').slick( $.extend({
        responsive: [{
            breakpoint: 640,
            settings: 'unslick'
        }]
    }, slickBaseSettings) );

One would expect that once leaving the breakpoint the slider reinitializes but it is not the case. Am I missing something?

@aldidas

This comment has been minimized.

Show comment
Hide comment
@aldidas

aldidas Apr 29, 2015

In my recent project, I was facing this issue and ended up to assign the slick() initialization inside another function. So we can listen to jQuery's $(window).resize(), and re-init the slick when the window's width reach the breakpoint. Here is my code :

    // function and variables, 'unslick' while window size reach maximum width (641px)
    var maxWidth = 641,
      slickVar = {
        lazyLoad: 'ondemand',
        dots: false,
        infinite: false,
        slidesToShow: 2,
        slidesToScroll: 1,
        mobileFirst: true,
        responsive: [
          {
            breakpoint: maxWidth,
            settings: 'unslick'
          }
        ]
      },
      runSlick = function() {
        $('#front-products').slick(slickVar);
        $('#front-recipes').slick(slickVar);
        $('#front-gallery').slick(slickVar);
        $('#front-blog').slick(slickVar);
      };

      // slick initialization while document ready
      runSlick();

      // listen to jQuery's window resize
      $(window).on('resize', function(){
        var width = $(window).width();
        if(width < maxWidth) {
          // reinit slick while window's width is less than maximum width (641px)
          runSlick();
        }
      });

Suggestions open for any better solution :)

aldidas commented Apr 29, 2015

In my recent project, I was facing this issue and ended up to assign the slick() initialization inside another function. So we can listen to jQuery's $(window).resize(), and re-init the slick when the window's width reach the breakpoint. Here is my code :

    // function and variables, 'unslick' while window size reach maximum width (641px)
    var maxWidth = 641,
      slickVar = {
        lazyLoad: 'ondemand',
        dots: false,
        infinite: false,
        slidesToShow: 2,
        slidesToScroll: 1,
        mobileFirst: true,
        responsive: [
          {
            breakpoint: maxWidth,
            settings: 'unslick'
          }
        ]
      },
      runSlick = function() {
        $('#front-products').slick(slickVar);
        $('#front-recipes').slick(slickVar);
        $('#front-gallery').slick(slickVar);
        $('#front-blog').slick(slickVar);
      };

      // slick initialization while document ready
      runSlick();

      // listen to jQuery's window resize
      $(window).on('resize', function(){
        var width = $(window).width();
        if(width < maxWidth) {
          // reinit slick while window's width is less than maximum width (641px)
          runSlick();
        }
      });

Suggestions open for any better solution :)

@simeydotme

This comment has been minimized.

Show comment
Hide comment
@simeydotme

simeydotme Apr 29, 2015

Collaborator

It's dubiously documented here: https://github.com/kenwheeler/slick/releases/tag/1.4.0 - No current plans to change this. Better to use the window.resize event if you plan on removing carousels :)

Collaborator

simeydotme commented Apr 29, 2015

It's dubiously documented here: https://github.com/kenwheeler/slick/releases/tag/1.4.0 - No current plans to change this. Better to use the window.resize event if you plan on removing carousels :)

@stevegrunwell

This comment has been minimized.

Show comment
Hide comment
@stevegrunwell

stevegrunwell Mar 7, 2017

For those who stumble across this issue through Google, I did a writeup on my company's blog demonstrating how to cleanly re-initialize Slick carousel in a responsive setting, after destroying it via unslick.

Hopefully this helps someone else :)

stevegrunwell commented Mar 7, 2017

For those who stumble across this issue through Google, I did a writeup on my company's blog demonstrating how to cleanly re-initialize Slick carousel in a responsive setting, after destroying it via unslick.

Hopefully this helps someone else :)

@Grawl

This comment has been minimized.

Show comment
Hide comment
@Grawl

Grawl Jul 20, 2017

my dirty try on this:

function slick() {
	$('[data-slick]').each(function(index, element) {
		if($(element).hasClass('slick-initialized')) return
		$(element).slick()
	})
}
if(window.innerWidth > 640) {
	slick()
}
$(window).on('resize', function(event) {
	console.log(event)
	if(event.target.innerWidth > 640) {
		slick()
	}
	else {
		$('[data-slick]').slick('unslick')
	}
})

Grawl commented Jul 20, 2017

my dirty try on this:

function slick() {
	$('[data-slick]').each(function(index, element) {
		if($(element).hasClass('slick-initialized')) return
		$(element).slick()
	})
}
if(window.innerWidth > 640) {
	slick()
}
$(window).on('resize', function(event) {
	console.log(event)
	if(event.target.innerWidth > 640) {
		slick()
	}
	else {
		$('[data-slick]').slick('unslick')
	}
})
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment