WordPress.org

Ready to get started?Download WordPress

Forums

Customizr
[resolved] Swipe guesture in slider and between posts (9 posts)

  1. Coolav
    Member
    Posted 4 months ago #

    Hi,

    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.

  2. Coolav
    Member
    Posted 3 months ago #

    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..

  3. ElectricFeet
    Member
    Posted 3 months ago #

    Care to share the code?

  4. Coolav
    Member
    Posted 3 months ago #

    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.

  5. ElectricFeet
    Member
    Posted 3 months ago #

    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?

  6. d4z_c0nf
    Member
    Posted 3 months ago #

    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

  7. Coolav
    Member
    Posted 3 months ago #

    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();
        }
  8. ElectricFeet
    Member
    Posted 3 months ago #

    Thanks, will try it out as soon as I can!

  9. nikeo
    Member
    Theme Author

    Posted 3 months ago #

    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

Reply

You must log in to post.

About this Theme

About this Topic