The Extra theme includes a Featured Posts Slider module which displays a slider of posts. On mobile, users can move between posts by first clicking on the slider to bring up “previous” and “next” arrows, and then clicking on the desired arrow. If you’d like to make navigation easier for your users, here’s how to make add a “swipe effect” to the slider.
To add a swipe effect to the slider, which will let the user navigate between slides simply by swiping left and right on the slider, add the following jQuery code to your site:
<script>
jQuery(function($) {
$slider = $('.featured-posts-slider-module');
$slider.on("touchstart", function(event) {
this.touchstartx = event.originalEvent.touches[0].pageX;
});
$slider.on("touchend", function(event) {
touchendx = event.originalEvent.changedTouches[0].pageX;
movedby = touchendx-this.touchstartx;
sliderwidth = $(this).width();
if (movedby > sliderwidth / 5) {
$(this).find('.et-pb-slider-arrows a:first-child').click();
//alert('swipe right by ' + movedby);
} else if (movedby < -(sliderwidth/5)) {
$(this).find('.et-pb-slider-arrows a:last-child').click();
//alert('swipe-left by ' + movedby);
}
});
});
</script>You can add this to the theme by pasting it into "Extra > Theme Options > Integration > Add code to the head of your blog", after anything else that is in there.
