Question

我正在使用BxSlider而我试图让它从一张幻灯片垂直滚动到另一张幻灯片。我已经浏览了这些示例，我发现的唯一一件事就是它可以让你在同一张幻灯片中滚动，但不会滚动到下一张幻灯片。我基本上试图弄清楚如何滚动幻灯片，类似于：http://www.newjumoconcept.com/或http://www.hugeinc.com/

这是我的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/

我该如何操作以便滚动到下一张幻灯片并在下一张幻灯片全屏时停止？

Answer 1

使用：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();
  });

BXSlider：使用鼠标将其垂直滚动到下一张幻灯片

1 个答案: