如何为mostslider jQuery插件添加自定义滑动导航

Question

我使用的是mostslider.js jquery插件。我需要为移动视图中的滑块添加滑动导航，遗憾的是，mostslider不支持滑动导航。那么，我如何手动将滑动导航添加到此滑块。。？

附言：改变滑块插件不是一个选项。

Answer 1

您可以使用触摸库来检测触摸事件，并根据滑动方向调用Mostslider插件的next()和prev()方法。

---

例如，您可以使用Hammer.js（3.96KB gzipped）来检测滑动：

$(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还有一个jQuery插件，它可以发出jQuery事件。如果你包括它，你可以简单地做：

$(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();
    }
  });
});

请注意，在jQuery事件对象中，您必须访问类似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>

---

旁注：ev.direction的值2和4分别为"DIRECTION_LEFT"和"DIRECTION_RIGHT"。这里提到了这些常数

Answer 2

我使用这个插件添加滑动支持：

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

你可以利用左派&向右箭头，然后做这样的事情：

  $("#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

哦，嘿。这是julian（mostslider的创建者）。也许我应该给滑块的标签加下标。。。从未想过它会被用在某个地方，因为那里没有反馈信息或其他任何东西。

我真的很抱歉没有回答你的问题。

顺便说一句：我正在做v2.0.0（在github repo上查找分支）。默认情况下，它已经支持滑动导航。也许你想在未来的项目中使用它。

祝你一切顺利，Julian

Answer 4

我使用touchSwipe插件。我采取了下一种方式：

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

})；