应用于猫头鹰轮播时，鼠标滚轮插件不起作用答案

【问题标题】：Mousewheel plugin is not working when applied to owl carousel应用于猫头鹰轮播时，鼠标滚轮插件不起作用
【发布时间】：2015-11-23 15:24:11
【问题描述】：

我一直在尝试将鼠标滚轮插件应用到 owl carousel。但是，它似乎不起作用。我相信我的代码应该完全按照网上的指示进行。旋转木马有效，但滚动无效。

    <!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">

    <link href='http://fonts.googleapis.com/css?family=Open+Sans:400italic,400,300,600,700' rel='stylesheet' type='text/css'>
    <link href="../assets/css/bootstrapTheme.css" rel="stylesheet">
    <link href="../assets/css/custom.css" rel="stylesheet">

    <!-- Owl Carousel Assets -->
    <link href="../owl-carousel/owl.carousel.css" rel="stylesheet">
    <link href="../owl-carousel/owl.theme.css" rel="stylesheet">

    <!-- Prettify -->
    <link href="../assets/js/google-code-prettify/prettify.css" rel="stylesheet">


    <!-- Le fav and touch icons -->
    <link rel="apple-touch-icon-precomposed" sizes="144x144" href="../assets/ico/apple-touch-icon-144-precomposed.png">
    <link rel="apple-touch-icon-precomposed" sizes="114x114" href="../assets/ico/apple-touch-icon-114-precomposed.png">
      <link rel="apple-touch-icon-precomposed" sizes="72x72" href="../assets/ico/apple-touch-icon-72-precomposed.png">
                    <link rel="apple-touch-icon-precomposed" href="../assets/ico/apple-touch-icon-57-precomposed.png">
                                   <link rel="shortcut icon" href="../assets/ico/favicon.png">
  </head>


     <style>
      .owl-carousel {
      width: 200px;
      overflow: hidden;
    }
    .owl-item {
      background: red;
      width: 200px;
      height: 200px;
      line-height: 200px;
      font-size: 100px;
      color: #fff;
      text-align: center;
    }
      </style>
      <body>
     <div id="title">
      <div class="container">
        <div class="row">
          <div class="span12">
            <h1>Content with Images</h1>
          </div>
        </div>
      </div>
    </div>

      <div id="demo">
        <div class="container">
          <div class="row">
            <div class="span12">

              <div class="owl-carousel">
                <div class="item"><img src="assets/owl1.jpg" alt="Owl Image"></div>
                <div class="item"><img src="assets/owl2.jpg" alt="Owl Image"></div>
                <div class="item"><img src="assets/owl3.jpg" alt="Owl Image"></div>
                <div class="item"><img src="assets/owl4.jpg" alt="Owl Image"></div>
                <div class="item"><img src="assets/owl5.jpg" alt="Owl Image"></div>
                <div class="item"><img src="assets/owl6.jpg" alt="Owl Image"></div>
                <div class="item"><img src="assets/owl7.jpg" alt="Owl Image"></div>
                <div class="item"><img src="assets/owl8.jpg" alt="Owl Image"></div>
              </div>

            </div>
          </div>
        </div>

    </div>




    <script src="../assets/js/jquery-2.1.0.js"></script> 
    <script src="../owl-carousel/owl.carousel.js"></script>
    <script src="../assets/js/jquery.mousewheel.js"></script>


    <!-- Demo -->



    <script>
var owl = $('.owl-carousel');
owl.owlCarousel({
    items       : 1,
    singleItem  : true,
    rewindNav   : false,
    dots        : true,
});
owl.on('mousewheel', '.owl-stage', function (e) {
    if (e.deltaY<0) {
      console.log(e.deltaY);
        owl.trigger('next.owl');
    } else {
        owl.trigger('prev.owl');
    }
    e.preventDefault();
});
    </script>

    <script src="../assets/js/bootstrap-collapse.js"></script>
    <script src="../assets/js/bootstrap-transition.js"></script>
    <script src="../assets/js/bootstrap-tab.js"></script>

    <script src="../assets/js/google-code-prettify/prettify.js"></script>
      <script src="../assets/js/application.js"></script>

  </body>
</html>

【问题讨论】：

标签： jquery scroll carousel mousewheel

【解决方案1】：

我遇到了同样的问题并制定了解决方案 - 我在这里回答了一个非常相似的问题：

How can I make my owl carousel direction follow the mouse wheel direction

我的 Chrome、Firefox 和 IE11 的基本代码是：

//Firefox:
owl.on('DOMMouseScroll','.owl-stage',function(e){
    if (e.originalEvent.detail > 0){ 
        owl.trigger('next.owl');
        } else {
        owl.trigger('prev.owl');
    }
    e.preventDefault();
    });

//Chrome, IE
owl.on('mousewheel','.owl-stage',function(e){
    if (e.originalEvent.wheelDelta > 0){
        owl.trigger('next.owl');
        } else {
            owl.trigger('prev.owl');
    }
    e.preventDefault();
});

【讨论】：