jquery - owl-carousel-autoWidth，当最后一项可见时避免可见区域出现空白

Question

我的代码

$('.owl-carousel').owlCarousel({
    margin:10,
    loop:false,
    autoWidth:true,
    nav:true,
    items:1,
})

注意: 1) 循环 false(我不需要循环项目)

2) 项目 - 我不知道如何管理显示项目数量(在流畅响应的网站上实现轮播)

我的目标当最后一个项目可见时，“下一步”按钮应隐藏(我需要项目始终适合可见区域)

myfiddle

Answer 1

检查这个fiddle

var owl = $('.owl-carousel').owlCarousel({
    margin:10,
    loop:false,
    autoWidth:true,
    nav:true,
    items:1,
    onInitialized : function(){
        if($('.owl-item').first().hasClass('active'))
            $('.owl-prev').hide();
        else
            $('.owl-prev').show();
        }
    })
owl.on('changed.owl.carousel',function(e){
    if(e.item.index == 0)
        $('.owl-prev').hide();
    else
        $('.owl-prev').show();
    if(e.page.count == (e.page.index + 1))
        $('.owl-next').hide();
    else
        $('.owl-next').show();
})

我已将两个函数附加到两个事件(onInitialized 和 changed.owl.carousel)。

onInitialized内的函数会隐藏上一个按钮onload(也可以通过css实现。)changed.owl.carousel内的函数code> 将根据各自的条件隐藏/显示 prev 和 next。

有关事件的更多文档，请参阅this