Thread Starter
Coolav
(@coolav)
Well, after some mucking around I figured out a way to write some custom code using the hammer.js library. It worked quite well so I implemented swipe for navigation between posts/events/images and so on if the user agent is identified as a mobile device. A word of advice; hammer uses some non-standard jQuery namespace and event handling so be patient..
Thread Starter
Coolav
(@coolav)
There are tons of different ways of putting touch on the bootstrap slider – check this out..
I used the standard wordspress useragent detection to figure out if it’s a mobile device. For swiping the bootstrap carousel the code looks like this, using hammer.js v1.05:
jQuery(document).ready(function($) {
function touchSlide() {
$('#customizr-slider').hammer().on('swipeleft', function(ev) {
ev.gesture.preventDefault();
$(this).carousel('next');
ev.gesture.stopDetect();
})
$('#customizr-slider').hammer().on('swiperight', function(ev) {
ev.gesture.preventDefault()
$(this).carousel('prev');
ev.gesture.stopDetect();
})
}
if ($('.gesture').hasClass('iphone')) {
touchSlide();
}
});
I’ll get back to how to navigate between the posts when I have more time.
Thanks Coolav. Cool indeed 🙂
I had in fact seen the link you attached, but gave up because it was beyond my knowledge level.
For those of us who don’t know anything about jQuery, could you explain where you put this code?
Electric put that code in the footer.
add_action('wp_footer', 'add_swipe_gestures', 100);
function add_swipe_gestures(){
?>
<script type="text/javascript">
//that script here
</script>
<?php
}
But you also have to have and enqueue that hammer.js script
Thread Starter
Coolav
(@coolav)
As d4z_c0nf said, you can put the code in the footer or enqueue it in the functions.php of your child theme, something like this:
function child_theme_scripts() {
wp_enqueue_script('hammer', TC_BASE_URL . '../js/hammer.min.js', array('jquery'), 'v1.0.5', true);
wp_enqueue_script('script-name', TC_BASE_URL . '../js/custom-javascript.js', array('jquery'), '1.0.0', true);
}
add_action('wp_enqueue_scripts', 'child_theme_scripts');
You can find the hammer jQuery plugin here here. Just include the jquery.hammer.min.js somewhere, and it should work fine. Oh, by the way remove this from the code I posted above, or it won’t work:
if ($('.gesture').hasClass('iphone')) {
touchSlide();
}
Thanks, will try it out as soon as I can!
Hi @coolav, thanks for sharing this. Pretty interesting and it is something I had in mind since a while.
I might come with a core implementation of this feature.
Best regards
