Last active
August 8, 2019 20:39
-
-
Save wearehyphen/d9cbe84331e9c32d5e27 to your computer and use it in GitHub Desktop.
Allowing partial reveal of X pixels of the next slide in a Slick-slideshow through the 'setPosition' event.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
function revealPartialSlide(padding) { // Padding (amount of the next slide you want to reveal) | |
var $slides = $('.element').find('.slick-slide') // Find the slides | |
,slideCount = $slides.length // Grab the amount of slides | |
,slidesToShow = $('.element').slick('getOption','slidesToShow') // Grab the 'slidesToShow' number | |
,slideWidth = $slides.outerWidth() // Get the width of the slides (as calculated by Slick) | |
,newWidth = Math.round(slideWidth - (padding / slidesToShow)) // Calculate the new width | |
// If less slides than you want to show, do nothing.... | |
if(slideCount < slidesToShow) { | |
return false; | |
} | |
// Re-calculate the width of '.slick-track'... | |
$('.element').find('.slick-track').css({ | |
width: newWidth * slideCount | |
}); | |
// Set the new width on each slide... | |
$slides.each(function() { | |
$(this).css({ | |
width: newWidth | |
}); | |
}); | |
} | |
// Run function on 'setPosition'-event. | |
// Means it'll work with responsive slideshows as well, as far as my testing goes. | |
$('.element').on('setPosition',function(slick) { | |
revealPartialSlide(50); | |
}); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Sorry for my late reply. This looks like something I could use. I will let you know if it works.