bx-slider салфетки влево и вправо поддержка жесты

Я пытаюсь выяснить, как сделать салфетки влево и проведите правой рукой в плагин bx-slider. Причина, по которой я спрашивал, состоит в том, что у меня есть ползунок bx, который синхронизирует слайдер изображения с ползунком надписи. То, что происходит, находится на последнем слайде, когда я прокручиваю влево на изображении, обратное направление заголовка и слайды справа, чего я не хочу. Я ищу простое, но не слишком сложное решение для bx-слайдера, чтобы обнаружить салфетки влево и выполнить предыдущий переход слайдов.bx-slider салфетки влево и вправо поддержка жесты

Я изучил эту функцию и увидел функции swumberleft для hammer.js, touchswipe и jQuery mobile (хочу использовать это, но только для jQuery mobile library, а не для jQuery), но я действительно не хочу использовать библиотека для простой функции прокрутки, и было слишком много кода, чтобы сделать это с нуля в Javascript.

Я никогда не погружался в код bx-слайдера, но можно ли добавить или обнаружить жестов, так что, когда я провёл влево на изображении, bx-slider будет goToPrevSlide(), так как салфетка справа по умолчанию отлично работает на мобильных устройствах?

Вот мой код слайдера изображения и подписи слайдера:

// for image slider 
var bx = $('#hero .bxslider').bxSlider({ 
    auto: true, 
    infiniteLoop: true, 
    pager: false, 
    controls: true, 
    pause: 5000, 
    onSlideBefore: syncTextSlider, 
}); 

// for caption slider 
var cx = $("#slider-text").bxSlider({ 
    infiniteLoop: true, 
    pager: false, 
    controls: false, 
    preventDefaultSwipeX: true, // prevent swiping x-axis on mobile 
    preventDefaultSwipeY: false, // prevent swiping y-axis on mobile 
    touchEnabled: false, // prevent touch transitions on the bxslider; make 'true' if implementing slider controls 

}); 

// function to sync bx slider with cx slider 
function syncTextSlider($ele, from, to) { 
    cx.goToNextSlide(to); 
}

источник

2016-02-22 TheAmazingKnight

Эта версия я пошел на 180 градусов. Поведение OP желает в значительной степени нормального поведения. Быстрый пробой:

Удалены #slider-text
Удалены все обратные вызовы на .bxslider
Добавлены слайды #slider-text в .bxslider
Добавлены дополнительные и скорректированные функции сенсорного экрана
Удалены ссылки, которые были обернуты вокруг изображения (могут мешать прокручиванию).

Теперь переход от последнего к первому слайду выглядит естественным и гладким.

<!doctype html> 
 
<html> 
 

 
<head> 
 
    <meta charset="utf-8"> 
 
    <title>35486338</title> 
 
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/bxslider/4.2.5/jquery.bxslider.css"> 
 
    <style> 
 
    /* Remove style to relocate controls to original position */ 
 
    .bx-controls-direction a { 
 
     top: 55% !important; 
 
    } 
 
    </style> 
 
</head> 
 

 
<body> 
 
    <!--image slider desktop--> 
 
    <div id="hero"> 
 
    <ul class="bxslider"> 
 
     <li> 
 
     <img src="http://placehold.it/350x150/000/0ff/?text=1" class="slider-img-responsive"> 
 
     <nav> 
 
      <h1>Title 1</h1> 
 
      <h2>Byline 1</h2> 
 
      <a href="www.google.com">Button 1</a> 
 
     </nav> 
 
     </li> 
 
     <li> 
 
     <img src="http://placehold.it/350x150/000/fff/?text=2" class="slider-img-responsive"> 
 
     <nav> 
 
      <h1>Title 2</h1> 
 
      <h2>Byline 2</h2> 
 
      <a href="www.google.com">Button 2</a> 
 
     </nav> 
 
     </li> 
 
     <li> 
 
     <img src="http://placehold.it/350x150/000/e00/?text=3" class="slider-img-responsive"> 
 
     <nav> 
 
      <h1>Title 3</h1> 
 
      <h2>Byline 3</h2> 
 
      <a href="www.google.com">Button 3</a> 
 
     </nav> 
 
     </li> 
 
     <li> 
 
     <img src="http://placehold.it/350x150/000/f3f/?text=4" class="slider-img-responsive"> 
 
     <nav> 
 
      <h1>Title 4</h1> 
 
      <h2>Byline 4</h2> 
 
      <a href="www.google.com">Button 4</a> 
 
     </nav> 
 
     </li> 
 
     <li> 
 
     <img src="http://placehold.it/350x150/000/3f3/?text=5" class="slider-img-responsive"> 
 
     </a> 
 
     <nav> 
 
      <h1>Title 5</h1> 
 
      <h2>Byline 5</h2> 
 
      <a href="www.google.com">Button 5</a> 
 
     </nav> 
 
     </li> 
 
    </ul> 
 
    </div> 
 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script> 
 
    <script src="https://cdn.jsdelivr.net/bxslider/4.2.5/jquery.bxslider.min.js"></script> 
 
    <script> 
 
    var bx = $('.bxslider').bxSlider({ 
 
     auto: true, 
 
     infiniteLoop: true, 
 
     pager: false, 
 
     controls: true, 
 
     pause: 5000, 
 
     preventDefaultSwipeX: false, 
 
     preventDefaultSwipeY: true, 
 
     touchEnabled: true, 
 
     swipeThreshold: 20 
 
    }); 
 
    </script> 
 
</body> 
 

 
</html>

источник

2016-02-23 15:41:58 zer00ne

Спасибо так много! Это решение, которое я изначально искал. Он работает отлично, чем предыдущая версия! – TheAmazingKnight

IKR? Иногда я должен сделать шаг назад и подумать: «WTF я думал?» * O_0 – zer00ne

bx-slider салфетки влево и вправо поддержка жесты

ответ

Смежные вопросы