Ocultar botones de navegación personalizados si el carrusel tiene menos elementos para mostrar – Owl Carousel

Estoy usando una broma de búho en una de las páginas y estoy usando la siguiente secuencia de comandos del tema unificar http://htmlstream.com/preview/unify-v1.7/shortcode_carousels.html

Quiero ocultar los botones de navegación cuando el carrusel tiene menos elementos para mostrar, incluso en el modo de respuesta, algo similar a lo que se ha hecho en este ejemplo http://codepen.io/OwlFonk/pen/qhgjb?editors=101 , en este ejemplo de codepen botón ocultar basado en elementos visibles en diferentes tamaños de pantalla.

Traté de implementar lo mismo para la juerga pero no funciona para mí

violín 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'); }) 

No lo sé si aún lo necesitas, pero (por las dudas) si son solo los botones que te gustaría ocultar, puedes verificar el ancho de la ventana (como el ejemplo de @Mohamed-Yousef) y luego hacer un .hide() . Así es como debe ser más o menos así:

 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(); } 

Asegúrese de que esto se ejecute en la carga de documentos y cualquier otro evento que desencadene cambios en el carrusel.

También me gustaría mencionar que hice suposiciones sobre cómo se ve tu código a través del fragmento de código que diste en tu pregunta anterior, y no del violín que diste ya que los dos son diferentes el uno del otro. El violín es lo que creo que Mohamed-Yousef estaba basando en su respuesta, ya que parece la implementación predeterminada del carrusel de búhos (aunque no lo revisé a fondo), mientras que el de tu pregunta parece un botón personalizado implementado manualmente que está configurado para desencadenar los eventos owl.next/owl.prev.

Sé que es una pregunta antigua, pero también busqué la solución y encontré una en CSS puro, por lo que tal vez sea útil para alguien en el futuro. Para ocultar un punto podemos usar: pseudo clase de unico hijo. El problema es que no es compatible (solo Chrome), así que mejor es usar un alias “: first-child: last-child”:

 .owl-dot:first-child:last-child { display: none; } 

simplemente puede verificar el número de Divs usando

 $(document).ready(function () { var carousel = $("#owl-demo"); if($("#owl-demo div").length + 1 > 5){ carousel.owlCarousel({ navigation:true, navigationText: [ "< ", ">" ], }); } }); 

este control si más de 5 divs ejecutan owlCarousel y para el modo responsivo necesita verificar $(window).width(); por ejemplo

 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.... } } 

y así

 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(); } } }); 

Si usa Bootstrap 3, puede probar mi solución que se basa en clases receptivas. No necesita escucha adicional en el cambio de tamaño u otros eventos y se ejecuta en la inicialización. Además, es bastante simple.

  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'); 

Intenté esto y funcionó para mí

  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(); } } 

En lugar de usar opciones de respuesta, sugiero agregar o eliminar una clase deshabilitada en el botón anterior / siguiente, cuando no está activa.

 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], }); 

En CSS, puede ocultar el elemento deshabilitado o cambiar su estilo. Aquí está mi código SASS para clase CSS desactivada :

 .owl-next, .owl-prev { opacity: 1; transition: opacity 0.3s ease; &.disabled { opacity: 0; } } 

Esta es una vieja pregunta, pero la forma más sencilla que encontré para hacerlo es usar owlCarousel own vars:

 function toggleArrows(){ var c = $('.carousel').data('owlCarousel'); if(c.options.items==c.itemsAmount){ $('.next, .prev').hide(); }else{ $('.next, .prev').show(); } } 

El carrusel de búho actualizará sus var options.items internos en función del número de elementos visibles.

Puede ejecutar esto en el evento de cambio de tamaño de la ventana, solo tenga cuidado con responsiveRefreshRate, que actualiza los vars cada 200 ms (de forma predeterminada), por lo que ejecuto este código dentro de un tiempo de espera después del cambio de tamaño de la ventana.

 var tmtResize = false; $(window).resize(function(){ if(tmtResize) clearTimeout(tmtResize); tmtResize = setTimeout(function(){ toggleArrows(); }, 250); });