Javascript 如果轮播显示的项目较少，则隐藏自定义导航按钮 - Owl Carousel
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/29740640/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Hide custom navigation buttons if carousel has less items to show - Owl Carousel
提问by Learning
I am using owl carousal on one of the pages and i am using following script from theme unify http://htmlstream.com/preview/unify-v1.7/shortcode_carousels.html
我在其中一个页面上使用 owl carousal 并且我正在使用来自主题统一http://htmlstream.com/preview/unify-v1.7/shortcode_carousels.html 的以下脚本
I want to hide the navigation buttons when carousel has less items to show even in responsive mode something similar to what has been done in this example http://codepen.io/OwlFonk/pen/qhgjb?editors=101, in this codepen example button hide based on items visible in different screen sizes.
我想隐藏导航按钮，当 carousel 有更少的项目显示时，即使在响应模式下类似于在这个例子中所做的事情http://codepen.io/OwlFonk/pen/qhgjb?editors=101，在这个 codepen 例子中按钮隐藏基于不同屏幕尺寸中可见的项目。
I tried to implement same to the carousal but it is not working for me
我试图对 carousal 实施相同的操作，但它对我不起作用
fiddle http://codepen.io/anon/pen/gpYKvq
小提琴http://codepen.io/anon/pen/gpYKvq
//Owl Slider v1
var owl = jQuery(".owl-slider").owlCarousel({
itemsDesktop : [1000,5],
itemsDesktopSmall : [900,4],
itemsTablet: [600,3],
itemsMobile : [479,2],
});
jQuery(".next-v1").click(function(){
owl.trigger('owl.next');
})
jQuery(".prev-v1").click(function(){
owl.trigger('owl.prev');
})
回答by Bea
Dunno if you still need it, but (just in case) if it's just the buttonsthat you'd like to hide, you can check the window width (like @Mohamed-Yousef's example) and then just do a .hide(). This is how it should roughlylook like:
不知道您是否仍然需要它，但是（以防万一）如果只是您想隐藏的按钮，您可以检查窗口宽度（如@Mohamed-Yousef 的示例），然后只需执行.hide(). 大致应该是这样的：
var viewport = jQuery(window).width();
var itemCount = jQuery("#owl-demo div").length;
if(
(viewport >= 900 && itemCount > 5) //desktop
|| ((viewport >= 600 && viewport < 900) && itemCount > 4) //desktopsmall
|| ((viewport >= 479 && viewport < 600) && itemCount > 3) //tablet
|| (viewport < 479 && itemCount > 2) //mobile
)
{
jQuery('.next-v1, .prev-v1').hide();
}
else
{
jQuery('.next-v1, .prev-v1').show();
}
Make sure that this runs on document load and whatever other event would trigger changes in the carousel.
确保这在文档加载时运行，并且任何其他事件会触发轮播中的更改。
I'd also just like to mention that I made assumptions to how your code looks like via the code snippet you gave in your question above, and notfrom the fiddle you gave as the two are different from each other. The fiddle is what I think @Mohamed-Yousef was basing his answer from, as it lookslike the default implementation of owl carousel (I didn't check it thoroughly though), while the one in your question looks like a manually implemented custom button that is set to trigger the owl.next/owl.prev events.
我还想提一下，我通过你在上面的问题中给出的代码片段对你的代码的外观做了假设，而不是你给出的小提琴，因为两者彼此不同。小提琴是我认为@Mohamed-Yousef 基于他的答案的原因，因为它看起来像是 owl carousel 的默认实现（虽然我没有彻底检查它），而您问题中的那个看起来像一个手动实现的自定义按钮设置为触发 owl.next/owl.prev 事件。
回答by mrf
I know it's old question, but also looked for solution and found one in pure CSS, so maybe it will be useful for someone in future. To hide one dot we can use :only-child pseudo class. The problem is that it's not supported well (only chrome), so better one is to use alias of it ":first-child:last-child":
我知道这是一个老问题，但也寻找解决方案并在纯 CSS 中找到了一个，所以也许它对将来的某个人有用。要隐藏一个点，我们可以使用 :only-child 伪类。问题是它没有得到很好的支持（只有 chrome），所以更好的方法是使用它的别名“:first-child:last-child”：
.owl-dot:first-child:last-child {
display: none;
}
回答by Mohamed-Yousef
you can simply check the number of Divs by using
您可以通过使用简单地检查 Div 的数量
$(document).ready(function () {
var carousel = $("#owl-demo");
if($("#owl-demo div").length + 1 > 5){
carousel.owlCarousel({
navigation:true,
navigationText: [
"<i class='icon-chevron-left icon-white'><</i>",
"<i class='icon-chevron-right icon-white'>></i>"
],
});
}
});
this check if more than 5 divs run owlCarousel and for responsive mode you need to check for $(window).width();for example
这个检查是否有超过 5 个 div 运行 owlCarousel，对于响应模式，您需要检查$(window).width();例如
if($(window).width() > 800 && $(window).width() < 1400){ // for desktop
if($("#owl-demo div").length + 1 > 5){
// run carousel....
}
}else if($(window).width() > 600 && $(window).width() < 800){ // for Tab
if($("#owl-demo div").length + 1 > 4){ // change it as your screen size
// run carousel....
}
}
and so on
等等
回答by Ashish Mehta
var owl = jQuery(".owl-slider").owlCarousel({
itemsDesktop: [1000, 5],
itemsDesktopSmall: [900, 4],
itemsTablet: [600, 3],
itemsMobile: [479, 2],
afterInit: function() {
var viewport = jQuery(window).width();
var itemCount = jQuery(".owl-slider div").length;
if ((viewport >= 900 && itemCount > 5) //desktop
|| ((viewport >= 600 && viewport < 900) && itemCount > 4) //desktopsmall
|| ((viewport >= 479 && viewport < 600) && itemCount > 3) //tablet
|| (viewport < 479 && itemCount > 2) //mobile
) {
jQuery('.next-v1, .prev-v1').show();
} else {
jQuery('.next-v1, .prev-v1').hide();
}
},
afterUpdate: function() {
var viewport = jQuery(window).width();
var itemCount = jQuery("#owl-demo div").length;
if (
(viewport >= 900 && itemCount > 5) //desktop
|| ((viewport >= 600 && viewport < 900) && itemCount > 4) //desktopsmall
|| ((viewport >= 479 && viewport < 600) && itemCount > 3) //tablet
|| (viewport < 479 && itemCount > 2) //mobile
) {
jQuery('.next-v1, .prev-v1').show();
} else {
jQuery('.next-v1, .prev-v1').hide();
}
}
});
回答by Pawe? O.
If you use Bootstrap 3, you can try my solution which is based on reponsive classes. It doesnt need additional listener on resize or other events and is executed on initialize. Moreover its quite simple.
如果您使用 Bootstrap 3，您可以尝试我的基于响应类的解决方案。它不需要额外的调整大小或其他事件的监听器，并在初始化时执行。而且它很简单。
var $el = $('.my-carousel');
var breakpoints = {
0: {
items: 3
},
480: {
items: 4
},
769: {
items: 5
},
992: {
items: 4
},
1200: {
items: 5
}
};
var carousel = $el.owlCarousel({
loop: true,
margin: 10,
nav: false,
dots: false,
responsive: breakpoints
});
// get real items count
var items = $el.find('.owl-item:not(.cloned)').length;
// $nav = your navigation element, mine is custom
var $nav = $el.parent().find('.center-navigation');
// add responsive classes to hide navigation if needed
if(breakpoints[1200].items>=items) $nav.addClass('hidden-lg');
if(breakpoints[992].items>=items) $nav.addClass('hidden-md');
if(breakpoints[769].items>=items) $nav.addClass('hidden-sm');
if(breakpoints[480].items>=items) $nav.addClass('hidden-xs');
if(breakpoints[0].items>=items) $nav.addClass('hidden-xxs');
回答by Dilip
I tried this and it worked for me
我试过了，它对我有用
function HideNavigationInCarousel(ContainerdivId,viewport)
{
var itemCount = jQuery("#" + ContainerdivId +" .owl-item").length;
// console.log(ContainerdivId + " " + viewport+ " "+itemCount);
if (viewport / itemCount > (jQuery("#" + ContainerdivId + " .owl-item").width()))
{
jQuery("#" + ContainerdivId + " .owl-prev,"+"#" + ContainerdivId +" .owl-next").hide();
}
else {
jQuery("#" + ContainerdivId + ".owl-prev,"+"#" + ContainerdivId +" .owl-next").show();
}
}回答by odupont
Instead of using responsive options, I suggest adding or removing a disabledclass on prev/next button, when it's not active.
我建议不要使用响应式选项，而是在上一个/下一个按钮不活动时添加或删除禁用的类。
jQuery(".owl-slider")
.on('initialized.owl.carousel changed.owl.carousel refreshed.owl.carousel', function (event) {
if (!event.namespace) return;
var carousel = event.relatedTarget,
element = event.target,
current = carousel.current();
setTimeout(function() {
$('.owl-next', element).toggleClass('disabled', current === carousel.maximum());
$('.owl-prev', element).toggleClass('disabled', current === carousel.minimum());
}, 1);
})
.owlCarousel({
itemsDesktop : [1000,5],
itemsDesktopSmall : [900,4],
itemsTablet: [600,3],
itemsMobile : [479,2],
});
In CSS, you can either hide disabledelement or change its style. Here's my SASS code for disabledclass CSS :
在 CSS 中，您可以隐藏禁用的元素或更改其样式。这是我的禁用类 CSS 的SASS 代码：
.owl-next,
.owl-prev {
opacity: 1;
transition: opacity 0.3s ease;
&.disabled {
opacity: 0;
}
}
回答by Rafael Moni
This is an old question, but the simplest way I found to do it, is to use owlCarousel own vars:
这是一个老问题，但我发现最简单的方法是使用 owlCarousel 自己的变量：
function toggleArrows(){
var c = $('.carousel').data('owlCarousel');
if(c.options.items==c.itemsAmount){
$('.next, .prev').hide();
}else{
$('.next, .prev').show();
}
}
Owl carousel will update his internal var options.items based on the number of visible items.
Owl carousel 将根据可见项目的数量更新其内部 var options.items。
You can run this on the window resize event, just be careful with the responsiveRefreshRate, which update the vars each 200ms (by default), so I run this code inside a timeout after window resize.
您可以在窗口调整大小事件上运行它，只需注意响应刷新率，它每 200 毫秒更新一次变量（默认情况下），所以我在窗口调整大小后的超时内运行此代码。
var tmtResize = false;
$(window).resize(function(){
if(tmtResize) clearTimeout(tmtResize);
tmtResize = setTimeout(function(){
toggleArrows();
}, 250);
});
