Integrate your Toolset views slider with hammer.js

readme.md

Inspired by

• https://toolset.com/forums/topic/slider-swipe-on-mobile/#post-1833423
• https://toolset.com/forums/topic/i-really-need-to-make-a-slider-swipe-on-mobile-devices/
• https://toolset.com/forums/topic/slider-view-from-mobile/

Sources

• http://hammerjs.github.io/
• https://cdnjs.com/libraries/hammer.js

Documentation

• https://toolset.com/documentation/programmer-reference/adding-custom-javascript-code-to-views-that-use-ajax/

functions.php

<?php

/**
 * Register child theme assets
 * Put this in your my-child-theme/functions.php
 */
function my_child_theme_scripts()
{
    wp_enqueue_script('hammer', get_stylesheet_directory_uri() . '/assets/js/hammer.min.js', array(), '2.0.8', true);
    // wp_enqueue_script('hammer-min', 'https://cdnjs.cloudflare.com/ajax/libs/hammer.js/2.0.8/hammer.min.js', array(), '2.0.8');
    wp_enqueue_script('webprofit-hammer', get_stylesheet_directory_uri() . '/assets/js/hammer.js', array('jquery'), '0.0.1', true);
}
add_action('wp_enqueue_scripts', 'my_child_theme_scripts');

hammer.js

/**
 * location:
 * my-child-theme/assets/js/hammer.js
 */

function register_hammer() {
    // Get slider
    var slider = document.getElementById('posts-slider');

    // Skip if no slider is found
    if (!slider) {
        return;
    }

    // Register hammer
    var hammertime = new Hammer(slider);

    // Get prev/next links
    var prevSlide = document.getElementsByClassName('js-wpv-pagination-previous-link');
    var nextSlide = document.getElementsByClassName('js-wpv-pagination-next-link');

    // Register hammer events
    hammertime.on('swipeleft', function (ev) {
        if (prevSlide != null && prevSlide.length > 0) {
            prevSlide[0].click();
        }
    });
    hammertime.on('swiperight', function (ev) {
        if (nextSlide != null && nextSlide.length > 0) {
            nextSlide[0].click();
        }
    });
}

// Register hammer on page load
document.addEventListener("DOMContentLoaded", function (event) {
    register_hammer();
});

// After each slide is complete, register new hammer
jQuery(document).on('js_event_wpv_pagination_completed', function (event, data) {
    register_hammer();
});

hammer.min.js

/**
 * location:
 * my-child-theme/assets/js/hammer.min.js
 *
 * Get your hammer version here (File content)
 * Or load hammerjs from cdn, see functions.php
 * http://hammerjs.github.io/
 */

wpv-toolset-view.html

<!-- BEGIN LOOP -->

[wpv-layout-start]
	[wpv-items-found]
	<!-- wpv-loop-start -->
		<div id="posts-slider"><wpv-loop><div class="post">
            <!-- Do stuff here -->

            <!-- Hide pagination, needed for prev/next links in hammer.js -->
            <div style="display: none;">
                [wpv-pager-prev-page][/wpv-pager-prev-page]
                [wpv-pager-next-page][/wpv-pager-next-page]
            </div>
		</div></wpv-loop></div>
	<!-- wpv-loop-end -->
	[/wpv-items-found]
	[wpv-no-items-found]
		<strong>[wpml-string context="wpv-views"]No items found[/wpml-string]</strong>
	[/wpv-no-items-found]
[wpv-layout-end]

<!-- END LOOP -->