BXSlider：縱向滾動使用鼠標滾動到下一張幻燈片

我正在使用BxSlider，我試圖讓它從一張幻燈片垂直滾動到另一張。我已經通過了這些例子，我發現的唯一的事情就是它可以讓您在同一張幻燈片中滾動，但不會滾動到下一個幻燈片。基本上，我試圖找出如何通過類似於幻燈片滾動：http://www.newjumoconcept.com/或http://www.hugeinc.com/BXSlider：縱向滾動使用鼠標滾動到下一張幻燈片

這裏是我的javascript

$('#content').bxSlider({ 
    auto: 0, 
    touchEnabled: true, 
    swipeThreshold: 50, 
    minSlides: 1, 
    maxSlides: 1, 
    slideMargin: 0, 
    infiniteLoop: !1, 
    preloadImages: "all", 
    responsive: !0, 
    pagerCustom: "#pager", 
    mode: "vertical", 
    controls: false 
    });

這裏是的jsfiddle：http://jsfiddle.net/jz78whwf/

如何做到這一點所以它會滾動到下一張幻燈片，並在下一張幻燈片全屏時停止播放？

來源

2015-05-05 Joe Bobby

@ cr0ss爲什麼這個編輯？我做錯了什麼嗎？ –

你有一個錯字。沒什麼特別的。我試圖幫助你，但沒有得到，斯里。 – cr0ss

使用：http://brandonaaron.github.io/jquery-mousewheel/jquery.mousewheel.js

HTML：

<ul class="bxslider"> 
    <li><img src="http://placehold.it/160x189&text=1" /></li> 
    <li><img src="http://placehold.it/160x189&text=1" /></li> 
    <li><img src="http://placehold.it/160x189&text=1" /></li> 
</ul>

CSS：

.bx-wrapper { 
    position: relative; 
    margin: 0 auto 60px; 
    padding: 0; 
    *zoom: 1; 
} 

.bx-wrapper img { 
max-width: 100%; 
display: block; 
}

JS：

var slider = $("ul#bxslider").bxSlider(); 

    $('ul#bxslider').mousewheel(function(event, delta, deltaX, deltaY) { 
    if (delta > 0) { 
     slider.goToPrevSlide(); 
    } 
    if (deltaY < 0){ 
     slider.goToNextSlide(); 
    } 
    event.stopPropagation(); 
    event.preventDefault(); 
    });

來源

2016-11-17 12:34:31

BXSlider：縱向滾動使用鼠標滾動到下一張幻燈片

回答

相關問題