如何在滾動上觸發bxSlider的向下和向上箭頭單擊？

Question

我有一個垂直的bxslider。 單擊箭頭時，滑塊會上下滾動。 我也想在滾動上觸發相同的箭頭單擊功能。

這是相同的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綁定到滑塊：

jsfiddle鏈接

  $(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>