Last active
December 18, 2019 14:27
-
-
Save EarthlingDavey/cb220a10612dc20777ac1690c1dd7ead to your computer and use it in GitHub Desktop.
example of making flickity slider more adaptive.
This file contains 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
$sliderElement = $('.variation-slider'); | |
var sliderOptions = { | |
cellSelector: '.variation-slide', | |
freeScroll: true, | |
pageDots: false, | |
imagesLoaded: true, | |
percentPosition: false, | |
wrapAround: true | |
}; | |
adaptiveFlickity($sliderElement, sliderOptions); | |
// add a resize listener with throttle here ? | |
function duplicateSlides(cellSelector) { | |
if ($(cellSelector + '.duplicate-cell').length) { | |
return false; | |
} | |
var $slides = $(cellSelector).clone(); | |
$slides.addClass('duplicate-cell'); | |
$(cellSelector) | |
.last() | |
.after($slides); | |
} | |
function adaptiveFlickity($sliderElement, sliderOptions) { | |
// get out if the slider is hidden | |
if ($sliderElement.css('display') == 'none') { | |
return false; | |
} | |
var cellWidths = 0; | |
$(sliderOptions.cellSelector).each(function() { | |
if ($(this).hasClass('duplicate-cell')) { | |
return; | |
} | |
// add the widths f each cell | |
cellWidths += $(this).outerWidth(); | |
}); | |
// do duplicate slides exist? We'll use this later | |
var areDuplicates = $sliderElement.find('.duplicate-cell').length; | |
// if slides are wider than viewport ... let's have a slider | |
if (cellWidths > $sliderElement.width()) { | |
var plentyOfSlides = cellWidths > $sliderElement.width() * 1.6; | |
var reInit = false; | |
if (plentyOfSlides && areDuplicates) { | |
// we don't need duplicate cells if there are plenty of original cells | |
$sliderElement.find('.duplicate-cell').remove(); | |
reInit = true; | |
} else if (!plentyOfSlides && !areDuplicates) { | |
// we do need duplicates if there aren't plenty of cells | |
duplicateSlides(sliderOptions.cellSelector); | |
reInit = true; | |
} | |
// if we're going to re-init then destroy first | |
if (reInit && $sliderElement.hasClass('flickity-enabled')) { | |
$sliderElement.flickity('destroy'); | |
} | |
// if we need to reInit or flickity is not enabled | |
if (reInit || !$sliderElement.hasClass('flickity-enabled')) { | |
// create flickity with options | |
$sliderElement.flickity(sliderOptions); | |
} | |
} else { | |
// slides are narrower than viewport | |
if (areDuplicates) { | |
// remove the duplicates from DOM | |
$sliderElement.find('.duplicate-cell').remove(); | |
} | |
// if flickity is enabled | |
if ($sliderElement.hasClass('flickity-enabled')) { | |
// destroy flickity | |
$sliderElement.flickity('destroy'); | |
} | |
} | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment