如何在滾動時觸發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 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>