Open seangeng opened 5 years ago
I have this problem too
I also have this problem whereas I am using slick for a long time and never had this issue before.
This works perfectly on desktop but as soon as I am enabling touch device in devtool, the slider doesn't slide anymore. On android devices neither.
Adding $('.slick-slide').bind('touchstart', function(){ console.log('touchstart') }) in my console does indeed trigger the touchstart event
I found a workaround that works for me :
var xCoordStart,
yCoordStart,
xSlideTrigger = 10,
slickElement = $(".slick-slider")
slickElement.bind('touchstart', function (e){
xCoordStart = e.originalEvent.touches[0].clientX;
yCoordStart = e.originalEvent.touches[0].clientY;
});
slickElement.bind('touchend', function (e){
var xCoordEnd = e.originalEvent.changedTouches[0].clientX;
var yCoordEnd = e.originalEvent.changedTouches[0].clientY;
var deltaX = Math.abs(xCoordEnd - xCoordStart)
var deltaY = Math.abs(yCoordEnd - yCoordStart)
if(deltaX > deltaY){ // prevent slide while scrolling vertically
if(xCoordStart > xCoordEnd + xSlideTrigger){
slickElement.slick('slickNext');
}
else if(xCoordStart < xCoordEnd + xSlideTrigger){
slickElement.slick('slickPrev');
}
}
});
I confirm the same bug. I have two slides on the same page but the one with the images is the only one that doesn't swipe on mobile. Taking on @Ricro answer, what worked for me was this:
var xStart, xEnd;
slickElement = $("#slideshow");
slickElement
.on("mousedown touchstart", function (e) {
if (e.originalEvent.pageX) {
xStart = e.originalEvent.pageX;
} else {
xStart = e.originalEvent.touches[0].pageX;
}
})
.on("mousemove touchmove", function (e) {
if (e.originalEvent.pageX) {
xEnd = e.originalEvent.pageX;
} else {
xEnd = e.originalEvent.touches[0].pageX;
}
})
.on("mouseup touchend", function (e) {
var deltaX = xEnd - xStart;
if (deltaX < 0) {
slickElement.slick("slickNext");
} else {
slickElement.slick("slickPrev");
}
});
Slick slider dragging and swiping works for me fine on desktop, but not on mobile devices.
====================================================================
Check out the slider here on mobile: https://www.smokecartel.com/
====================================================================
Steps to reproduce the problem
====================================================================
What is the expected behaviour?
Slide should swipe to next slide
====================================================================
What is observed behaviour?
Nothing happens.
====================================================================
More Details
My code is: `featured.slick({ dots: true, infinite: true, speed: 500, adaptiveHeight: false, draggable: true, swipe: true, autoplay: true, verticalSwiping: false, autoplaySpeed: 5000, cssEase: 'linear', nextArrow: '', prevArrow: '', });
$('.slick-slide').bind('touchstart', function(){ console.log('touchstart') });`
Tried debugging with touchstart, but the touchstart event does not event does not trigger.