bx слайдер с пользовательским пейджером, имеющим проблемы при перемещении между слайдами при наведении - PullRequest
Новая
       55

bx слайдер с пользовательским пейджером, имеющим проблемы при перемещении между слайдами при наведении

1 голос
/ 20 марта 2019

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

Прототип: https://codepen.io/Denzy/pen/OqBXxq

У меня почти все работает. В моем примере выше, это работает кратко, но если я быстро перемещаю мышь между элементами, все это зависает. Если я поменяю событие 'on' на пейджер, чтобы оно было 'click' , все работает, как задумано, но мне нужно, чтобы это было, когда вы наводите курсор на элемент, а не нажимаете. Это заставляет меня поверить, что проблема связана с наведением курсора на другой элемент до того, как слайдер закончит движение с первого элемента, и все будет сломано.

Мои текущие события мыши выглядят так: 

$('#slide-container .pager-list a').on('mouseenter', function() {
    slider.goToSlide(this.getAttribute('data-slide-index'));
    slider.stopAuto();
});

$('#slide-container .pager-list a').on('mouseleave', function() {
    slider.startAuto();
});

* Редактировать: Остальная часть jQuery: 

var slider = $('.bxslider').bxSlider({
    pagerCustom: '#slide-container',
    slideWidth: 400,
    controls: false,
    auto: true,
    autoHover: true,
    pause: 2000
});

slider.bxSlider();

Если это проблема, что я могу сделать, чтобы предотвратить перемещение слайда до тех пор, пока не будет выполнено первое действие скольжения?

1 Ответ

0 голосов
/ 20 марта 2019

Соответствующие изменения

  1. Удалите лишние экземпляры .bxSlider(), вам нужен только один на ul.bxslider
  2. Удалить параметр pagerCustom, поскольку он будет ожидать щелчка по ссылкам (какой OP-запрос требует явного исключения такого поведения).
  3. Добавить pager: false. Мы будем полагаться на делегирование событий jQuery для вызова методов bxSlider.

  4. Сузить селекторы для событий мыши: 

      $('.pager').on(MOUSEEVENT, 'a', function() {...
  5. Изменить mouseenter событие на mouseover событие. mouseenter охватывает только когда мышь пересекает границу элемента, тогда как mouseover охватывает пересечение границы и продолжительность, в течение которой указатель находится внутри указанного элемента.

  6. Изменение: 

     ...(this.getAttribute('data-slide-index')) // Result is a String ex. "1"<br>

    до: 

     ...($(this).data('slide-index')) // Result is a Number ex. 1

Дополнительные изменения

  1. Для каждой ссылки href значение атрибута установлено на #/, что предотвращает <a> прыжок поведение.

  2. Каждый <img> параметр URL для текста был изменен на этот шаблон: 

    &text=Slide%20N

    %20 = пробел и N = число от 1 до 6

Демо 

<!DOCTYPE html>
<html>

<head>
  <meta charset='utf-8'>
  <link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.2.1/css/bootstrap.min.css" rel="stylesheet">
  <link href="https://cdnjs.cloudflare.com/ajax/libs/bxslider/4.2.15/jquery.bxslider.min.css" rel="stylesheet">
  <style>
    ul {
      list-style: none;
    }
    
    li {
      padding: 20px 0;
    }
    
    .active {
      color: red;
    }
    
    a {
      color: #fff;
      padding: 10px;
      background-color: #64758a;
    }
    
    a:hover {
      color: red;
    }
  </style>
</head>

<body>
  <main class="slide-container">
    <ul class="pager">
      <li> <a data-slide-index="0" href="#/">Slide 1</a>
      </li>
      <li> <a data-slide-index="1" href="#/">Slide 2</a>
      </li>
      <li> <a data-slide-index="2" href="#/">Slide 3</a>
      </li>
    </ul>
    <ul class="bxslider">
      <li>
        <img src="http://placehold.it/800x250/5E7074/FFFFFF&text=Slide%201" />
      </li>
      <li>
        <img src="http://placehold.it/800x250/5E7074/FFFFFF&text=Slide%202" />
      </li>
      <li>
        <img src="http://placehold.it/800x250/5E7074/FFFFFF&text=Slide%203" />
      </li>
      <li>
        <img src="http://placehold.it/800x250/5E7074/FFFFFF&text=Slide%204" />
      </li>
      <li>
        <img src="http://placehold.it/800x250/5E7074/FFFFFF&text=Slide%205" />
      </li>
      <li>
        <img src="http://placehold.it/800x250/5E7074/FFFFFF&text=Slide%206" />
      </li>
    </ul>
    <ul class="pager">
      <li> <a data-slide-index="3" href="#/">Slide 4</a>
      </li>
      <li> <a data-slide-index="4" href="#/">Slide 5</a>
      </li>
      <li> <a data-slide-index="5" href="#/">Slide 6</a>
      </li>
    </ul>
  </main>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.2.1/js/bootstrap.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/bxslider/4.2.15/jquery.bxslider.min.js"></script>
  <script>
    var slider = $('.bxslider').bxSlider({
      slideWidth: 400,
      controls: false,
      auto: true, //should be set to true
      autoHover: true,
      pause: 2000,
      pager: false
    });

    $('.pager').on('mouseover', 'a', function() {
      slider.goToSlide($(this).data('slide-index'));
      slider.stopAuto();
    });

    $('.pager').on('mouseleave', 'a', function() {
      slider.startAuto();
    });
  </script>
</body>

</html>
...