Question

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

P.S：无法更改滑块插件。

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 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.direction的值2和4分别为"DIRECTION_LEFT"和"DIRECTION_RIGHT"。这些常量被提到here

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

哦，嘿。这是朱利安（大多数人的创造者）。也许我应该下标到我的滑块的标签...从来没有想过它被用在某处，因为没有反馈信息或其他任何东西。

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

顺便说一下：我正在使用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');      
        }

}）;

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

4 个答案: