Skip to content

Instantly share code, notes, and snippets.

@wearehyphen
Last active August 8, 2019 20:39
Show Gist options
  • Save wearehyphen/d9cbe84331e9c32d5e27 to your computer and use it in GitHub Desktop.
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.
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);
});
@peterboorsma
Copy link

Sorry for my late reply. This looks like something I could use. I will let you know if it works.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment