I'm trying to figure out how to do a swipe left and swipe right gesture within the bx-slider plugin. The reason I asked is because I have a bx-slider that sync the image slider with a caption slider. What happens is on the last to first slide, when I swipe left on the image, the caption inverse direction and slides in from the right, which I don't want. I'm looking for a simple, but not overly complicated solution for bx-slider to detect swipe left and do a previous slide transition.
I've researched about this feature and saw hammer.js, touchswipe, and jquery mobile's swipeleft functionality (want to use this, but only for jquery mobile library, not jquery itself) but I really don't want to use a library for a simple swipe function and there was too much code to do it from scratch in Javascript.
I never really dived into bx-slider's code, but is it possible to add or detect swipe gesture, so when I swipe left on the image, bx-slider will goToPrevSlide() as the swipe right by default works perfectly on mobile?
Here's my code for the image slider and caption slider:
// for image slider
var bx = $('#hero .bxslider').bxSlider({
auto: true,
infiniteLoop: true,
pager: false,
controls: true,
pause: 5000,
onSlideBefore: syncTextSlider,
});
// for caption slider
var cx = $("#slider-text").bxSlider({
infiniteLoop: true,
pager: false,
controls: false,
preventDefaultSwipeX: true, // prevent swiping x-axis on mobile
preventDefaultSwipeY: false, // prevent swiping y-axis on mobile
touchEnabled: false, // prevent touch transitions on the bxslider; make 'true' if implementing slider controls
});
// function to sync bx slider with cx slider
function syncTextSlider($ele, from, to) {
cx.goToNextSlide(to);
}
This version I went 180 degrees. The behavior OP desires is pretty much normal behavior. A quick breakdown:
#slider-text.bxslider#slider-text to .bxsliderNow the transition from the last to first slide looks natural and smooth.
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>35486338</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/bxslider/4.2.5/jquery.bxslider.css">
<style>
/* Remove style to relocate controls to original position */
.bx-controls-direction a {
top: 55% !important;
}
</style>
</head>
<body>
<!--image slider desktop-->
<div id="hero">
<ul class="bxslider">
<li>
<img src="http://placehold.it/350x150/000/0ff/?text=1" class="slider-img-responsive">
<nav>
<h1>Title 1</h1>
<h2>Byline 1</h2>
<a href="www.google.com">Button 1</a>
</nav>
</li>
<li>
<img src="http://placehold.it/350x150/000/fff/?text=2" class="slider-img-responsive">
<nav>
<h1>Title 2</h1>
<h2>Byline 2</h2>
<a href="www.google.com">Button 2</a>
</nav>
</li>
<li>
<img src="http://placehold.it/350x150/000/e00/?text=3" class="slider-img-responsive">
<nav>
<h1>Title 3</h1>
<h2>Byline 3</h2>
<a href="www.google.com">Button 3</a>
</nav>
</li>
<li>
<img src="http://placehold.it/350x150/000/f3f/?text=4" class="slider-img-responsive">
<nav>
<h1>Title 4</h1>
<h2>Byline 4</h2>
<a href="www.google.com">Button 4</a>
</nav>
</li>
<li>
<img src="http://placehold.it/350x150/000/3f3/?text=5" class="slider-img-responsive">
</a>
<nav>
<h1>Title 5</h1>
<h2>Byline 5</h2>
<a href="www.google.com">Button 5</a>
</nav>
</li>
</ul>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/bxslider/4.2.5/jquery.bxslider.min.js"></script>
<script>
var bx = $('.bxslider').bxSlider({
auto: true,
infiniteLoop: true,
pager: false,
controls: true,
pause: 5000,
preventDefaultSwipeX: false,
preventDefaultSwipeY: true,
touchEnabled: true,
swipeThreshold: 20
});
</script>
</body>
</html>