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

Question

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

PS：更改滑块插件不是一种选择。

Answer 1

您可以使用触摸库来检测触摸事件，并根据滑动方向调用Mostslidernext()插件的和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 Plugin，它发出 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.directionis"DIRECTION_LEFT"和的值 2 和 4"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

噢！嗨。这是朱利安（mostslider 的创建者）。也许我应该为我的滑块下标标签......从来没有想过它在某处使用，因为没有反馈消息或其他任何东西。

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

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

一切顺利，朱利安

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');      
        }

});