Jquery 如果没有'；没有足够的项目滚动？_Jquery_Jquery Plugins_Owl Carousel

Jquery 如果没有'；没有足够的项目滚动？

jquery jquery-plugins

Jquery 如果没有'；没有足够的项目滚动？,jquery,jquery-plugins,owl-carousel,Jquery,Jquery Plugins,Owl Carousel,如果没有足够的项目滚动，有没有办法禁用上一个和下一个链接例如：这些库允许4个项目（桌面），此库中只有4个项目，但仍会显示分页按钮，但应禁用我知道在以前的版本中有一种方法可以做到这一点，但是.disabled类没有加载到这个版本的链接中？我在任何演示中都没有看到它这样做我可以使用一些额外的jquery来覆盖它吗，或者是否有我缺少的任何内置I 这是我的密码： $(".owl-carousel").owlCarousel({ items: 4,

如果没有足够的项目滚动，有没有办法禁用上一个和下一个链接

例如：这些库允许4个项目（桌面），此库中只有4个项目，但仍会显示分页按钮，但应禁用

我知道在以前的版本中有一种方法可以做到这一点，但是.disabled类没有加载到这个版本的链接中？我在任何演示中都没有看到它这样做

我可以使用一些额外的jquery来覆盖它吗，或者是否有我缺少的任何内置I

这是我的密码：

        $(".owl-carousel").owlCarousel({
            items: 4,
            loop: true,
            rewindNav: false,
            autoplayHoverPause: true,
            margin: 0,
            dots: false,
            navText: "<>",
            responsive:{
                0:{ // breakpoint from 0 up - small smartphones
                    items:1,
                    nav:true
                },
                480:{  // breakpoint from 480 up - smartphones // landscape
                    items:2,
                    nav:false
                },
                768:{ // breakpoint from 768 up - tablets
                    items:3,
                    nav:true,
                    loop:false
                },
                992:{ // breakpoint from 992 up - desktop
                    items:4,
                    nav:true,
                    loop:false
                }
            }

        });

$（“.owl carousel”）.owlCarousel({
项目：4，
循环：对，
倒带导航：错误，
自动播放暂停：对，
保证金：0，
点：错，
导航文本：“”，
响应：{
0:{//0上的断点-小型智能手机
项目：1，
导航：对
},
480:{//从480向上的断点-智能手机//横向
项目：2，
导航：错
},
768:{//768以上的断点-平板电脑
项目：3，
导航：是的，
循环：false
},
992:{//从992向上的断点-桌面
项目：4，
导航：是的，
循环：false
}
}
});

Owl Carousel 2提供了许多有用的事件，您可以使用这些事件来实现这一点：

var $owl = $('.owl-carousel');

$owl.on('initialized.owl.carousel resized.owl.carousel', function(e) {
    $(e.target).toggleClass('hide-nav', e.item.count <= e.page.size);
});

$owl.owlCarousel({ ... });

如果您添加或删除幻灯片或任何类似的内容，您可能需要连接到其他事件，以便根据需要显示或隐藏导航：

Owl Carousel 2提供了许多有用的事件，您可以使用这些事件来实现此目的：

var $owl = $('.owl-carousel');

$owl.on('initialized.owl.carousel resized.owl.carousel', function(e) {
    $(e.target).toggleClass('hide-nav', e.item.count <= e.page.size);
});

$owl.owlCarousel({ ... });

如果您添加或删除幻灯片或其他类似的内容，您可能需要连接到其他事件，以便根据需要显示或隐藏导航：

在Owl转盘2中，当到达第一个和最后一个元素时，它会自动将“禁用”类添加到上一个和下一个导航控制器。因此，您可以只添加此css代码

.owl-nav .disabled {
  display: none;
}

在Owl转盘2中，当到达第一个和最后一个元素时，它会自动将“禁用”类添加到上一个和下一个导航控制器。因此，您可以只添加此css代码

.owl-nav .disabled {
  display: none;
}

对于没有类的控件和检查项目数（拇指）等，这可能有助于指导您。。解决方案的一部分也可以是上面gregdev提供的，但请根据需要查看导航和/或分页的真假控制。您设置了一个不同的基于计数的检查，而不仅仅是用于无类控件和检查项目数（拇指）等。这可能有助于指导您。。解决方案的一部分也可以是上面gregdev提供的，但请根据需要查看导航和/或分页的真假控制。您设置了一个不同的基于计数的检查，而不仅仅是我不知道是否存在一个更简单的解决方案，但我已扩展了gregdev的解决方案，以便在（非循环）转盘的开始或结束时不会显示“上一步”或“下一步”按钮。注意添加了一个“已更改”事件

一旦到达旋转木马的最右端，

e.item.count-e.page.size

必须等于

e.item.index

，否则为负数。如果

e.page.size

可以容纳比项目计数更多的项目，那么

e.item.index

将始终等于0，因此通过将两个切换类链接为CSS目标，您可以完全删除owl控件（从而删除孤独的owl点），如果需要的话

.hide-owl-next .owl-next, .hide-owl-prev .owl-prev, .hide-owl-next.hide-owl-prev .owl-controls {
    display: none;
}

我不知道是否存在一个更简单的解决方案，但我扩展了gregdev的解决方案，以便在（非循环）转盘的开始或结束时不会显示“上一个”或“下一个”按钮。注意添加了一个“已更改”事件