Question

我想知道是否可以知道我的猫头鹰旋转木马是否在列表的末尾以禁用next按钮。

这是我的Javascript：

 <script>

        $(document).ready(function() {

            var owl = $("#owl");

            owl.owlCarousel({
                items : 5, //10 items above 1000px browser width
                itemsDesktop : [1000,5], //5 items between 1000px and 901px
                itemsDesktopSmall : [900,3], // betweem 900px and 601px
                itemsTablet: [600,2], //2 items between 600 and 0
                itemsMobile : false, // itemsMobile disabled - inherit from itemsTablet option
            });

            // Custom Navigation Events
            $(".next").click(function(){
                owl.trigger('owl.next');
                if(owl.)
            })
            $(".prev").click(function(){
                owl.trigger('owl.prev');
            })
            $(".play").click(function(){
                owl.trigger('owl.play',1000); //owl.play event accept autoPlay speed as second parameter
            })
            $(".stop").click(function(){
                owl.trigger('owl.stop');
            })

        });

    </script>

这是我的HTML：

<div class="col-xs-6">
                <div class="row contracts" rv-show="context:contracts | length | gt 1">
                    <div class="col-sm-12 box box-flex" rv-slide="context:stepHide" style="">
                        <ul id="owl">
                            <li class="col-xs-2">987456</li>
                            <li class="col-xs-2">558745</li>
                            <li class="col-xs-2">126985</li>
                            <li class="col-xs-2">598746</li>
                            <li class="col-xs-2">325478</li>
                            <li class="col-xs-2">987652</li><li class="col-xs-2">126985</li>
                            <li class="col-xs-2">598746</li>
                            <li class="col-xs-2">325478</li>
                            <li class="col-xs-2">987652</li>
                        </ul>
                    </div>
                </div>
            </div>
            <div class="col-xs-6">
                <div class="customNavigation">
                    <a class="btn prev">Previous</a>
                    <a class="btn next">Next</a>
                    <a class="btn play">Autoplay</a>
                    <a class="btn stop">Stop</a>
                </div>
            </div>

        </div>

    </div>

</div>

所以当显示最后一个li项目时，我想禁用下一个按钮。我搜索了猫头鹰的功能，但我没有找到我想要的东西。

谢谢

Answer 1

您可以与afterAction和currentItem这样的

同时进行此操作

<script>

$(document).ready(function() {

    var owl = $("#owl");

    owl.owlCarousel({
        items : 5, //10 items above 1000px browser width
        itemsDesktop : [1000,5], //5 items between 1000px and 901px
        itemsDesktopSmall : [900,3], // betweem 900px and 601px
        itemsTablet: [600,2], //2 items between 600 and 0
        itemsMobile : false, // itemsMobile disabled - inherit from itemsTablet option
        afterAction: function() {
             if(this.owl.currentItem == $(owl).children().length - 1) {
                 $('.btn .next').hide();
             } else {
                 $('.btn .next').show();
             }
        },
    });

    // Custom Navigation Events
    $(".next").click(function(){
        owl.trigger('owl.next');
        if(owl.)
    })
    $(".prev").click(function(){
        owl.trigger('owl.prev');
    })
    $(".play").click(function(){
        owl.trigger('owl.play',1000); //owl.play event accept autoPlay speed as second parameter
    })
    $(".stop").click(function(){
        owl.trigger('owl.stop');
    })

});

</script>

知道我的物品是否是最新的 - 猫头鹰旋转木马

1 个答案: