需求:移动到第一个或最后一个幻灯片时切换箭头按钮的显示/隐藏状态。

 

var owl_home_blog = $('.home-blog');
var owl_home_blog_init_num = 1;
owl_home_blog.owlCarousel({
    loop: false,
    margin: 30,
    nav: true,
    navText : ['<i class="fa fa-angle-left"></i>','<i class="fa fa-angle-right"></i>'],
    dots: false,
    autoplay: false,
    slideTransition: 'linear',
    autoplaySpeed: 3000,
    autoplayHoverPause: false,
    responsive: {
        0: {
            items: 1,
            margin: 15
        },
        479: {
            items: 2,
            margin: 15
        },
        768: {
            items: 2
        },
        979: {
            items: 2
        },
        1199: {
            items: 3
        }
    },
    onInitialized: function() {
        // 初始化箭头按钮的状态
        var owl = this;
        var totalItems = owl.items().length;
        if (owl.options.loop || totalItems > owl.options.items) {
            $('.owl-prev').hide();
            $('.owl-next').show();
        } else {
            $('.owl-prev').hide();
            if(owl_home_blog_init_num == 1){
                $('.owl-next').hide();
            }
        }

        owl_home_blog_init_num++;
    }
});

owl_home_blog.on('changed.owl.carousel', function(event) {
    // 切换箭头按钮的显示/隐藏状态
    var currentIndex = event.item.index;
    var totalItems = event.item.count;
    var visibleItems = event.page.size;
    if (currentIndex + visibleItems >= totalItems) {
        $('.owl-next').hide();
    } else {
        $('.owl-next').show();
    }
    if (currentIndex == 0) {
        $('.owl-prev').hide();
    } else {
        $('.owl-prev').show();
    }
});

发表回复

您的电子邮箱地址不会被公开。 必填项已用 * 标注