松开鼠标滚轮.js在 BX滑块垂直幻灯片导航的末尾

背景：我正在使用bx滑块。我正在垂直滚动全屏滑块，点导航向右浮动。我在幻灯片上添加了鼠标导航，以使用鼠标滚轮.js使用鼠标/触控板垂直上下滚动。幻灯片可以很好地上下滚动，但在最后一张幻灯片的末尾，向下滚动没有任何作用，因为它是最后一张幻灯片。我正在尝试找出一种方法，如果最后一张幻灯片暴露，则可以向下滚动到页脚。

我想过转动鼠标滚轮.js如果我们在最后一张幻灯片上，但问题是用户在最后一张幻灯片上无法向上滑动到上一张幻灯片，这对用户体验不利。

该网站现在在本地，但这是我的所有代码（当然，除了 bxslider）。

幻灯片网页

<div id="slider-home" class="sabreSlider">
    <ul id="bxslider" class="bxslider">
      <li class="sabre" style="background-image: url('<?php echo get_template_directory_uri(); ?>/images/sabretooth1.jpg');"></li>
      <li class="sabre" style="background-image: url('<?php echo get_template_directory_uri(); ?>/images/sabretooth2.jpg');"></li>
      <li class="sabre" style="background-image: url('<?php echo get_template_directory_uri(); ?>/images/sabretooth3.jpg');"></li>
      <li class="sabre sabreLast" style="background-image: url('<?php echo get_template_directory_uri(); ?>/images/sabretooth4.jpg');"></li>
    </ul>
</div><!-- #slider-home > end -->

jQuery

(function(window, $) {
    $(document).ready(function(){
        var $slider = $("ul#bxslider");
        var slider = $slider.bxSlider({
            mode: 'vertical',
            slideMargin: 5,
            infiniteLoop: false,
            hideControlOnEnd: true
        });
        //mousewheel events - down / up button trigger the scroll down / up
        $slider.on("mousewheel", function(event, delta, deltaX, deltaY) {
            //console.log(event, delta, deltaX, deltaY);
            if (delta > 0) {
                slider.goToPrevSlide();
            }
            if (deltaY < 0){
                slider.goToNextSlide();
            }
            event.stopPropagation();
            event.preventDefault();
        });

    });
})(window, jQuery);

.CSS

html, body.home, body.home #page, body.home .site-content, .content-area-home, main.site-main-home, body.home article, body.home .entry-content, .sabreSlider {
    height: 100%;
}
body.home .entry-content {
    margin: 0px;
}
.bx-wrapper {
    margin: 0;
}
ul.bxslider {
    margin: 0px;
}
.bx-viewport, .bx-wrapper {
    position:relative;
    width:100%;
    height:100% !important;
    top:0;
    left:0;
}
.bxslider, .bxslider li {
    height: 100% !important;;
}
.bxslider li {
    background-repeat: no-repeat;
    background-position: top center;
    background-size: cover;
}
.bx-wrapper .bx-viewport {
    left: 0;
    border: none !important;
    -moz-box-shadow: none;
    -webkit-box-shadow: none;
    box-shadow: none;
}
.bx-controls-direction {
    display: none;
}
.bx-wrapper .bx-pager {
    position: absolute;
    width: 20px !important;
    top: 45%;
    right: 26px;
}
.bx-wrapper .bx-pager .bx-pager-item {
    display: block !important;
    margin-bottom: 3px;
}
.bx-wrapper .bx-pager.bx-default-pager a {
    background: transparent;
    width: 20px;
    height: 20px;
    border: 2px solid #ffffff;
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    border-radius: 10px;
}
.bx-wrapper .bx-pager.bx-default-pager a:hover, .bx-wrapper .bx-pager.bx-default-pager a.active {
    background: #f16625;
    border-color: #f16625;
}

提前感谢您的任何指导、片段、重构等。

我可能是错的，但我相信您需要幻灯片上的属性："数据幻灯片索引"。以便它可以将它们按可排序的顺序排列。我使用了一段与您的概念类似的代码，它完全按照您的预期工作。我在比较中的区别是：

我使用了自定义寻呼机
在这些项目上使用"数据幻灯片索引"

我知道这个问题已经很老了，但如果将来遇到这个问题，希望可以帮助某人。

相关内容

最新更新

热门标签：