javascript - 如何在滚动时触发bxSlider的上下箭头点击？

Question

我有一个垂直的 bxslider。单击箭头时， slider 上下滚动。我也想在滚动时触发相同的箭头点击功能。

这是相同的 jsfiddle。在此它仅在单击箭头时滑动。我需要滚动相同的功能。谁能帮忙。

$(document).ready(function() {
            $('#bxslider-vertical .bxslider').bxSlider({
                mode: 'vertical', 
                infiniteLoop: false,
                pager:false,
                slideWidth: 200,
                minSlides: 2,                
                slideMargin: 10                                 
            });
});

JSFiddle http://jsfiddle.net/b1pprLL9/19/

Answer 1

您可以将 mousewheel DOMMouseScroll 绑定(bind)到您的 slider :

jsfiddle link

    $(document).ready(function() {
      var slider = $('#bxslider-vertical .bxslider').bxSlider({
        mode: 'vertical',
        infiniteLoop: false,
        pager: false,
        slideWidth: 200,
        minSlides: 2,
        slideMargin: 10
      });
      $('#bxslider-vertical .bxslider').bind('mousewheel DOMMouseScroll', function(event) {
        if (event.originalEvent.wheelDelta > 0 || event.originalEvent.detail < 0) {
          slider.goToPrevSlide();
        } else {
          slider.goToNextSlide();
        }
      });
    });

h3 {
  text-align: center;
}

hr {
  border: none;
  height: 1px;
  /* Set the hr color */
  color: #333;
  /* old IE */
  background-color: #333;
  /* Modern Browsers */
}

#bxslider-vertical .bx-wrapper .bx-controls-direction a {
  position: absolute;
  margin-top: -16px;
  outline: 0;
  width: 32px;
  height: 32px;
  text-indent: -9999px;
  z-index: 9999;
  top: auto;
}

#bxslider-vertical .bx-wrapper .bx-prev {
  top: 6%!important;
  left: 85px!important;
  background: url(https://cdn4.iconfinder.com/data/icons/miu/22/circle_arrow-up-24.png) no-repeat;
}

#bxslider-vertical .bx-wrapper .bx-next {
  bottom: 1%!important;
  left: 85px;
  background: url(https://cdn4.iconfinder.com/data/icons/miu/22/circle_arrow-down_download-24.png) no-repeat;
}

#bxslider-vertical .bx-wrapper .bx-next:hover {
  background: url(https://cdn4.iconfinder.com/data/icons/miu/22/circle_arrow-down_download-24.png) no-repeat;
}

#bxslider-vertical .bx-wrapper .bx-viewport,
#bxslider-horizontal .bx-wrapper .bx-viewport {
  -moz-box-shadow: none;
  -webkit-box-shadow: none;
  box-shadow: none;
  border: 1px solid gray;
  border-radius: 5px;
  left: 0px!important;
  padding: 5px;
  background: transparent;
  -webkit-transform: translatez(0);
  -moz-transform: translatez(0);
  -ms-transform: translatez(0);
  -o-transform: translatez(0);
  transform: translatez(0);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://bxslider.com/lib/jquery.bxslider.js"></script>
<link href="http://bxslider.com/lib/jquery.bxslider.css" rel="stylesheet"/>
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet"/>

<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>

<h3>Vertical Mode</h3>
<div id="bxslider-vertical">
  <div class="bxslider">
    <div class="slide"><img src="http://placehold.it/300x200&text=FooBar1" class="center-block img-responsive"></div>
    <div class="slide"><img src="http://placehold.it/133x200&text=FooBar2" class="center-block img-responsive"></div>
    <div class="slide"><img src="http://placehold.it/300x200&text=FooBar3" class="center-block img-responsive"></div>
    <div class="slide"><img src="http://placehold.it/133x200&text=FooBar4" class="center-block img-responsive"></div>
    <div class="slide"><img src="http://placehold.it/300x200&text=FooBar5" class="center-block img-responsive"></div>
    <div class="slide"><img src="http://placehold.it/300x200&text=FooBar6" class="center-block img-responsive"></div>
    <div class="slide"><img src="http://placehold.it/133x200&text=FooBar7" class="center-block img-responsive"></div>
    <div class="slide"><img src="http://placehold.it/300x200&text=FooBar8" class="center-block img-responsive"></div>
    <div class="slide"><img src="http://placehold.it/133x200&text=FooBar9" class="center-block img-responsive"></div>
    <div class="slide"><img src="http://placehold.it/300x200&text=FooBar10" class="center-block img-responsive"></div>
    <div class="slide"><img src="http://placehold.it/300x200&text=FooBar11" class="center-block img-responsive"></div>
    <div class="slide"><img src="http://placehold.it/300x200&text=FooBar12" class="center-block img-responsive"></div>
  </div>
</div>