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

Know if my item is the latest - Owl Carousel

本文关键字：猫头鹰 旋转木马 最新 是否是 我的      更新时间：2023-09-26

我想知道是否可以知道我的猫头鹰旋转木马是否在列表的末尾以禁用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项目时，我想禁用下一步按钮。我搜索了 Owl 函数，但没有找到我想要的东西。

谢谢

你可以用像这样的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>
相关文章：