Блог

Главная - Вопросы по программированию - Owl carousel со скоростью плагина прокрутки колеса мыши

Owl carousel со скоростью плагина прокрутки колеса мыши

#javascript #jquery #owl-carousel #mousewheel

#javascript #jquery #owl-carousel #колесо мыши

Вопрос:

Я использую Owl Carousel 2 Mouse Wheel плагин, поскольку на веб-сайте показано, как его реализовать: https://owlcarousel2.github.io/OwlCarousel2/demos/mousewheel.html

Вот мой пример: https://z-testing.000webhostapp.com/_owlcarousel /

Это мой код:

 owl.on('mousewheel', '.owl-stage', function (e) {
  if (e.deltaY>0) {
      owl.trigger('next.owl');
  } else {
      owl.trigger('prev.owl');
  }
  e.preventDefault();
});

Проблема, с которой я сталкиваюсь, заключается в том, что прокрутка не является плавной, она очень быстрая и прокручивает 6-10 слайдов одновременно, что невозможно использовать.
Я хочу, чтобы он был таким же плавным, как прокрутка колеса мыши, насколько это возможно.

Я нашел плагин lightbox, который интегрирует плагин mousewheel, и проверил, как они это делают, но я просто не знаю, как использовать это с моим кодом, вы можете мне помочь?

Это плагин: http://fancybox.net

Вы можете проверить на Image gallery (ps, try using mouse scroll wheel) примере всплывающей галереи.

Если вы загрузите плагин, вы увидите, что они реализовали плагин колеса мыши таким образом:

 if ($.fn.mousewheel) {
    wrap.bind('mousewheel.fb', function(e, delta) {
        if (busy) {
            e.preventDefault();

        } else if ($(e.target).get(0).clientHeight == 0 || $(e.target).get(0).scrollHeight === $(e.target).get(0).clientHeight) {
            e.preventDefault();
            $.fancybox[ delta > 0 ? 'prev' : 'next']();
        }
    });
}

Можете ли вы помочь мне заставить его правильно работать с Owl Carousel?

Ответ №1:

Для настройки скорости прокрутки необходимо использовать функцию smartSpeed.

https://owlcarousel2.github.io/OwlCarousel2/docs/api-options.html

 var owl = $('.owl-carousel');
$('.owl-carousel').owlCarousel({
  loop:true,
  margin:0,
  nav:true,
  smartSpeed:1000,
  responsive:{
      0:{
          items:1
      },
      600:{
          items:1
      },
      1000:{
          items:1
      }
  }
});
owl.on('mousewheel', '.owl-stage', function (e) {
  if (e.deltaY>0) {
      owl.trigger('next.owl');
  } else {
      owl.trigger('prev.owl');
  }
  e.preventDefault();
});
$(document,window,'html').mouseleave(function(){
  $("#footer").fadeOut();
}).mouseenter(function(){
  $("#footer").fadeIn();
});
$(function(){
  $("#header").load("includes/header.html");
  $("#footer").load("includes/footer.html");
});  
 body { padding-top: 0px;}  
 <link rel="stylesheet" href="https://z-testing.000webhostapp.com/_owlcarousel/app/css/normalize.css">
<link rel="stylesheet" href="https://z-testing.000webhostapp.com/_owlcarousel/app/css/owl.carousel.min.css">
<link rel="stylesheet" href="https://z-testing.000webhostapp.com/_owlcarousel/app/css/owl.theme.default.min.css">
<link rel="stylesheet" href="https://z-testing.000webhostapp.com/_owlcarousel/app/css/bootstrap.min.css">
<link rel="stylesheet" href="https://z-testing.000webhostapp.com/_owlcarousel/app/css/main.css">

  <header id="header"></header>

  <div class="owl-carousel owl-theme">
    <div class="item" style="background-image:url(https://z-testing.000webhostapp.com/_owlcarousel/app/img/carousel-3-ux.png)"></div>
    <div class="item" style="background-image:url(https://z-testing.000webhostapp.com/_owlcarousel/app/img/carousel-4-editorial.png)"></div>
    <div class="item" style="background-image:url(https://z-testing.000webhostapp.com/_owlcarousel/app/img/carousel-5-senaletica.png)"></div>
  </div>

  <footer id="footer"></footer>

  <script src="https://z-testing.000webhostapp.com/_owlcarousel/app/js/vendor/modernizr-3.11.2.min.js"></script>
  <script src="https://z-testing.000webhostapp.com/_owlcarousel/app/js/jquery-3.5.1.min.js"></script>
  <script src="https://z-testing.000webhostapp.com/_owlcarousel/app/js/bootstrap.bundle.min.js"></script>
  <script src="https://z-testing.000webhostapp.com/_owlcarousel/app/js/jquery.justifiedGallery.min.js"></script>
  <script src="https://z-testing.000webhostapp.com/_owlcarousel/app/js/owl.carousel.min.js"></script>
  <script src="https://z-testing.000webhostapp.com/_owlcarousel/app/js/jquery.mousewheel.min.js"></script>
  <script src="https://z-testing.000webhostapp.com/_owlcarousel/app/js/main.js"></script>

Комментарии:

1. спасибо, но если вы проверите свой фрагмент, он вообще не работает, по-прежнему ведет себя так же.