Как добавить пользовательскую навигацию смахивания для плагина mostslider jQuery?

Я использую плагин mostslider.js jquery. Мне нужно добавить скользящую навигацию для слайдера в мобильном представлении, к сожалению, mostslider не поддерживает навигацию с помощью прокрутки. Итак, как я могу вручную добавить навигацию смахивания к этому слайдеру?

PS: изменение плагина слайдера не вариант.

Источник

4 ответа

Решение

Вы можете использовать сенсорную библиотеку для обнаружения сенсорных событий и вызвать next() а также prev() методы плагина Mostslider в соответствии с направлением пролистывания.

Например, вы можете использовать Hammer.js (3,96 КБ в сжатом виде) для обнаружения удара:

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

Примечание: значения 2 и 4 ev.direction является "DIRECTION_LEFT" а также "DIRECTION_RIGHT" соответственно. Эти константы упоминаются здесь

Источник

Я использую этот плагин, чтобы добавить поддержку салфетки:

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');  
    }
  });
Источник

О эй Вот Джулиан (создатель Мостслидера). Может быть, мне стоит подписаться на тег для моего слайдера... Никогда не думал, что он где-то используется, так как не было сообщений обратной связи или чего-то еще.

Мне очень жаль, что я не ответил на ваш вопрос.

Кстати: я работаю на v2.0.0 (поищите ветку на репозитории github). Это уже поддерживает навигацию по умолчанию. Может быть, вы хотели бы использовать его в будущих проектах.

Всего наилучшего, Джулиан

Источник

Я использую плагин touchSwipe. Я сделал это следующим образом:

 $("#slider").swipe( {

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

});

Источник
Другие вопросы по тегам