Cacher des boutons de navigation personnalisé si carrousel a moins d'éléments à afficher - Owl Carousel

Ne sais pas si vous avez encore besoin d'elle, mais (au cas où) si c'est juste le boutons que vous souhaitez masquer, vous pouvez vérifier la largeur de la fenêtre (comme @Mohamed Yousef exemple) et ensuite il suffit de faire une .hide(). C'est comment il devrait environ ressembler à:

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

Assurez-vous que cela fonctionne sur le document de charge et de tout autre événement allait déclencher des changements dans le carrousel.

J'avais aussi simplement vous mentionner que j'ai fait des hypothèses sur la manière dont à quoi ressemble le code via l'extrait de code que vous avez donné à votre question ci-dessus, et pas du violon vous a donné que les deux sont différents les uns des autres. Le violon est ce que je pense @Mohamed Yousef a été de fonder sa réponse, comme il semble comme le défaut de mise en œuvre de owl carousel (je n'ai pas vérifier soigneusement si), tandis que celui de votre question ressemble à un manuellement en œuvre bouton personnalisé qui est réglé pour se déclencher le hibou.suivant/owl.prev événements.

vous pouvez simplement vérifier le numéro de Divs en utilisant

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

});

cette case si plus de 5 divs exécuter owlCarousel et pour sensible mode, vous devez vérifier pour $(window).width(); par exemple

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

et ainsi de suite

Si vous utiliser Bootstrap 3, vous pouvez essayer ma solution qui est basée sur reponsive classes.
Il ne marche pas besoin de plus d'écoute sur le redimensionner ou d'autres événements, et est exécuté sur initialiser. En outre, il est assez 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');

Au lieu de responsive options, je vous suggère d'ajouter ou de retirer un désactivé classe sur prev/next bouton, quand il n'est pas actif.

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

Dans le CSS, vous pouvez masquer désactivé élément ou de changer son style.
Voici mon code SASS pour désactivé classe CSS :

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