AnythingSlider. How to Swipe right on Last Slide to go to URL?

Question

How would I make "swiperight" on the LAST SLIDE to go to a URL? (like it does when you click Next on slide 6)

http://nonoisenow.com/slideshow/

JS Code: http://nonoisenow.com/jscode/swiperight.js

Any advice? Thanks!

Answer 1

If I am reading the documentation properly you can add "swipeleft" and "swiperight" to the list of events that activate the clickForwardArrow and clickBackwardArrow in the jquery.anythingslider.js file

This is the original file section for interactivity:

// Interactivity
    clickForwardArrow   : "click",         // Event used to activate forward arrow functionality (e.g. add jQuery mobile's "swiperight")
    clickBackArrow      : "click",         // Event used to activate back arrow functionality (e.g. add jQuery mobile's "swipeleft")
    clickControls       : "click focusin", // Events used to activate navigation control functionality
    clickSlideshow      : "click",         // Event used to activate slideshow play/stop button
    allowRapidChange    : false,           // If true, allow rapid changing of the active pane, instead of ignoring activity during animation

This how it should look after adding the events (I think):

// Interactivity
    clickForwardArrow   : "click swiperight",         // Event used to activate forward arrow functionality (e.g. add jQuery mobile's "swiperight")
    clickBackArrow      : "click swipeleft",         // Event used to activate back arrow functionality (e.g. add jQuery mobile's "swipeleft")
    clickControls       : "click focusin", // Events used to activate navigation control functionality
    clickSlideshow      : "click",         // Event used to activate slideshow play/stop button
    allowRapidChange    : false,           // If true, allow rapid changing of the active pane, instead of ignoring activity during animation

Answer 2

Modify the swipe code to check if the swipe is occurring on the last page, if it is, then go to the desired URL (demo)

if (newx < x) {
    if (slider.currentPage < slider.pages) {
        slider.goForward(); 
    } else if (slider.currentPage === slider.pages) {
        // swipe while on the last page will go to google
        // doesn't work in this demo because of iframes
        window.location.href = 'http://google.com';
    }
}

Here is the full code:

/******************************************
  Swipe Demo - without using jQuery Mobile
 ******************************************/

$('#slider').anythingSlider({

    // Callback when the plugin finished initializing
    onInitialized: function(e, slider) {

        var time = 1000, // allow movement if < 1000 ms (1 sec)
            range = 50,  // swipe movement of 50 pixels triggers the slider
            x = 0, t = 0, touch = "ontouchend" in document,
            st = (touch) ? 'touchstart' : 'mousedown',
            mv = (touch) ? 'touchmove' : 'mousemove',
            en = (touch) ? 'touchend' : 'mouseup';

        $('<div class="swipe-overlay"></div>')
            .appendTo(slider.$window)
            .bind(st, function(e){
                // prevent image drag (Firefox)
                e.preventDefault();
                t = (new Date()).getTime();
                x = e.originalEvent.touches ? e.originalEvent.touches[0].pageX : e.pageX; 
            })
            .bind(en, function(e){
                t = 0; x = 0;
            })
            .bind(mv, function(e){
                e.preventDefault();
                var newx = e.originalEvent.touches ? e.originalEvent.touches[0].pageX : e.pageX,
                r = (x === 0) ? 0 : Math.abs(newx - x),
                // allow if movement < 1 sec
                ct = (new Date()).getTime();
                if (t !== 0 && ct - t < time && r > range) {
                    if (newx < x) {
                        if (slider.currentPage < slider.pages) {
                            slider.goForward(); 
                        } else if (slider.currentPage === slider.pages) {
                            // swipe while on the last page will go to google
                            // doesn't work in this demo because of iframes
                            window.location.href = 'http://google.com';
                        }
                    }
                    if (newx > x) { slider.goBack(); }
                    t = 0; x = 0;
                }
            });

    }

});