Support » Theme: Customizr » Swipe guesture in slider and between posts

  • Resolved Coolav



    I’ve looked around to add some mobile functionality to my site. In order to add gestures such as swipe and drag to navigate between posts and slides, the thing to use is apparently hammer.js from Eight Media.

    I found this: tutorial, but after mucking about a bit, I tested the live demo and it wasn’t working.

    Now I’m trying to adapt this tutorial from Eight Media’s Github for my needs. As I’m a bit of a novice in JavaScript I wondered if anyone had any success using hammer.js yet since it’s not THAT big of a deal that I want to spend days on figuring it out.

    Site is not yet live btw.

Viewing 8 replies - 1 through 8 (of 8 total)
  • 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..

    Care to share the code?

    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) {
            $('#customizr-slider').hammer().on('swiperight', function(ev) {
        if ($('.gesture').hasClass('iphone')) {

    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

    But you also have to have and enqueue that hammer.js script

    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')) {

    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

Viewing 8 replies - 1 through 8 (of 8 total)
  • The topic ‘Swipe guesture in slider and between posts’ is closed to new replies.