Question

背景：我正在使用bx滑块。我正在垂直滚动全屏滑块，右侧有一个点导航。我在幻灯片上添加了鼠标导航，使用mousewheel.js使用鼠标/触控板垂直向上和向下滚动。幻灯片向上和向下滚动很好，但在最后一张幻灯片的末尾，向下滚动什么也没做，因为它是最后一张幻灯片。如果最后一张幻灯片曝光，我试图想办法向下滚动到页脚。

如果我们在最后一张幻灯片上，我想要转动mousewheel.js，但问题是用户在最后一张幻灯片时无法滑到上一张幻灯片，对于UX来说会有坏处。

该网站现在位于本地，但这里是我的所有代码（当然除了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;
}

提前感谢任何指导，片段，重构等。

Answer 1

我可能错了，但我相信你需要这个属性：＆＃34; data-slide-index＆＃34;在幻灯片上。这样它就可以按可排序的顺序排列。我使用了类似的代码作为您的概念，它完全符合您的预期。我比较的差异是：

我使用了自定义寻呼机
使用＆＃39; data-slide-index＆＃39;

我知道这个问题已经过时了，但如果他们将来遇到这个问题，希望可以帮助别人。

在bxslider垂直幻灯片导航结束时取消mousewheel.js

1 个答案: