Enable scrolling via mousewheel
Author: iamstiilCreated Feb 11, 2015Updated Mar 24, 2025
Labelsfeature request
I'm experiencing a little problem with one of my sliders.
// Defined in seperate JS file
function scrollEnd(flickelem) {
// FLICKITY DragEnd
if ( flickelem.options.freeScroll ) {
flickelem.isFreeScrolling = true;
}
// set selectedIndex based on where flick will end up
var index = flickelem.dragEndRestingSelect();
if ( flickelem.options.freeScroll && !flickelem.options.wrapAround ) {
// if free-scroll & not wrap around
// do not free-scroll if going outside of bounding cells
// so bounding cells can attract slider, and keep it in bounds
var restingX = flickelem.getRestingPosition();
flickelem.isFreeScrolling = -restingX > flickelem.cells[0].target &&
-restingX < flickelem.getLastCell().target;
} else if ( !flickelem.options.freeScroll && index == flickelem.selectedIndex ) {
// boost selection if selected index has not changed
index += flickelem.dragEndBoostSelect();
}
// apply selection
// TODO refactor this, selecting here feels weird
flickelem.select( index );
}
// Inside a <script> tag inside the document
$(function(){
$(document).ready(function(e) {
var cellCount = $('.gallery-cell').length;
var canWrapAround = false;
if(cellCount > 1) canWrapAround = true;
$('.text-slider').flickity({
accessibility: true,
autoPlay: false,
cellAlign: 'center',
cellSelector: undefined,
contain: true,
draggable: true,
freeScroll: true,
friction: 0.2,
imagesLoaded: true,
initialIndex: 0,
percentPosition: true,
prevNextButtons: false,
pageDots: false,
resize: true,
rightToLeft: false,
watchCSS: false,
wrapAround: canWrapAround
}).mousewheel(function(e) {
e.preventDefault();
var flickelem = Flickity.data(this);
if (e.deltaX) {
flickelem.x += e.deltaX * e.deltaFactor;
}
else if (e.deltaY) {
flickelem.x += e.deltaY * e.deltaFactor;
}
scrollEnd(flickelem);
});
$(window).load(function(e) {
$('.text-slider').flickity('resize');
});
});
});I am using the jQuery mousewheelplugin to support scrolling inside flickity. But somehow on mobile devices occasionally I can't reach the last cell. It always flicks back to the previous one. Could it be a bug or could it be a fault of me?
Source: metafizzy/flickity