How add custom swipe navigation for mostslider jQuery plugin?

Question

I am using the mostslider.js jquery Plugin. I need to add swipe navigation for the slider in mobile view, sadly mostslider doesn't support swipe navigation. So how can I manually add swipe navigation to this slider..?

P.S: Changing the slider plugin is not an option.

Answer 1

You can use a touch library for detecting touch events and call the next() and prev() methods of the Mostslider plugin according to the swipe direction.

---

For example, You can use Hammer.js (3.96KB gzipped) to detect the swipe:

$(document).ready(function(){
    var slider = $("#slider").mostSlider({
        animation: 'slide',
        aniMethod: 'auto',
        autoPlay:false
    });
    var hammertime = new Hammer(slider.get(0)); // Pure hammer.js requires native DOM element
    hammertime.on('swipe', function(ev) {
        if(ev.direction == 4){ // Swipe right
           slider.next();
        }
        else if(ev.direction == 2){
           slider.prev(); // Swipe left
        }
    });
});

$(document).ready(function() {
  var slider = $("#slider").mostSlider({
    animation: 'slide',
    aniMethod: 'auto',
    autoPlay: false
  });
  var hammertime = new Hammer(slider.get(0));
  hammertime.on('swipe', function(ev) {
    if (ev.direction == 2) {
      slider.prev(); // Swipe left
    } else if (ev.direction == 4) { // Swipe right
      slider.next();
    }
  });
});

* {
  margin: 0;
  padding: 0;
}
html,body,.default,#slider {
  height: 100%;
}
#slider img {
  height: 100% !important;
  width: auto;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://raw.githack.com/julianhandl/mostslider/master/mostslider.min.js"></script>
<script src="http://hammerjs.github.io/dist/hammer.min.js"></script>
<script src="https://raw.githack.com/hammerjs/jquery.hammer.js/master/jquery.hammer.js"></script>
<link href="https://raw.githack.com/julianhandl/mostslider/master/themes/default/default.css" rel="stylesheet" />
<div class="slider-wrapper default">
  <div id="slider">
    <img src="http://www.blackberry-wallpapers.com/uploads/allimg/110511/2-1105112346350-L.jpg" />
    <img src="http://www.blackberry-wallpapers.com/uploads/allimg/110511/2-1105111042530-L.jpg" />
    <img src="http://www.kucuu.com/desktop-wallpaper-home/Landscape-Nature-Lake-Trees-Forest-Wallpaper-640x480.jpg" />
  </div>
</div>

---

Hammer.js also have a jQuery Plugin, which emits jquery events. If you include it, you can simply do:

$(document).ready(function () {
  var slider = $("#slider").mostSlider({
    animation: 'slide',
    aniMethod: 'auto',
    autoPlay: false
  }).hammer().bind('swipe', function (ev) { // Yay, now we can chain :)
     if (ev.gesture.direction == 2) {
        slider.prev(); // Swipe left
    }
     else if (ev.gesture.direction == 4) { // Swipe right
        slider.next();
    }
  });
});

Note that the in jQuery event object, you've to access the direction like event.gesture.direction.

$(document).ready(function() {
  var slider = $("#slider").mostSlider({
    animation: 'slide',
    aniMethod: 'auto',
    autoPlay: false
  }).hammer().bind('swipe', function(ev) {
    if (ev.gesture.direction == 4) { // Swipe right
      slider.next();
    } else if (ev.gesture.direction == 2) {
      slider.prev(); // Swipe left
    }
  });
});

* {
  margin: 0;
  padding: 0;
}
html,body,.default,#slider {
  height: 100%;
}
#slider img {
  height: 100% !important;
  width: auto;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://raw.githack.com/julianhandl/mostslider/master/mostslider.min.js"></script>
<script src="http://hammerjs.github.io/dist/hammer.min.js"></script>
<script src="https://raw.githack.com/hammerjs/jquery.hammer.js/master/jquery.hammer.js"></script>
<link href="https://raw.githack.com/julianhandl/mostslider/master/themes/default/default.css" rel="stylesheet" />
<div class="slider-wrapper default">
  <div id="slider">
    <img src="http://www.blackberry-wallpapers.com/uploads/allimg/110511/2-1105112346350-L.jpg" />
    <img src="http://www.blackberry-wallpapers.com/uploads/allimg/110511/2-1105111042530-L.jpg" />
    <img src="http://www.kucuu.com/desktop-wallpaper-home/Landscape-Nature-Lake-Trees-Forest-Wallpaper-640x480.jpg" />
  </div>
</div>

---

Side note: The values 2 and 4 of ev.direction is "DIRECTION_LEFT" and "DIRECTION_RIGHT" respectively. Those constants are mentioned here

Answer 2

I use this plugin to add swipe support:

http://labs.rampinteractive.co.uk/touchSwipe/demos/

You could take advantage of the left & right arrows and do something like this:

  $("#slider").swipe( {
    swipe:function(direction) {
      var dir = direction == "left" ? "right" : "left"; //If you swipe left, you want to trigger the right arrow
      $("#" + dir).trigger('click');  
    }
  });

Answer 3

Oh hey. Here's julian (creator of mostslider). Maybe I should subscript to the tag for my slider... Never thought it's used somewhere as there were no feedback messages or anything else.

I'm really sorry for not answering to your question.

By the way: I'm working on v2.0.0 (look for the branch on the github repo). This already supports swipe navigation by default. Maybe you would like to use it in future projects.

All the best, Julian

Answer 4

I use touchSwipe plugin. I did it the next way:

 $("#slider").swipe( {

        swipe:function(event, direction, distance, duration, fingerCount, fingerData) {   
           if (direction == "right"){
               var dir = "left";
            } else {
                var dir = "right";
            };  
            $("#" + dir).trigger('click');      
        }

});