web-dev-qa-db-fra.com

Le carrousel de hibou est toujours en transition quand il ne reste qu'une diapositive

Je me demande si quelqu'un pourrait aider avec ceci. J'utilise carrousel dans un système de gestion de contenu et j'aimerais que le client puisse parfois ne disposer que d'une diapositive s'il le souhaite. Cependant, s'il n'y a qu'une seule diapositive, la transition en fondu se produit toujours, elle passe donc essentiellement à elle-même. Est-il possible d'arrêter la transition du carrousel lorsqu'il n'y a qu'une seule diapositive? Je suis surpris que cette fonction ne soit pas intégrée, contrairement à d'autres carrousels que j'ai utilisés.

<div id="owl-demo" class="owl-carousel">
    <div class="item">
    <h2><umbraco:Item field="bigMessage" stripParagraph="true" convertLineBreaks="true" runat="server" /></h2>
    <p><umbraco:Item field="messageSubtext" stripParagraph="true" convertLineBreaks="true" runat="server" /></p>
    <umbraco:image runat="server" field="bannerImage" />
    </div>
</div>

<script src="/owl-carousel/owl.carousel.js"></script>

<style>
#owl-demo .item img{
    display: block;
    width: 100%;
    height: auto;
}
</style>


<script>
$(document).ready(function() {
  $("#owl-demo").owlCarousel({

    navigation: false,
    stopOnHover: true,
    paginationSpeed: 1000,
    autoPlay: 5000,
    goToFirstSpeed: 2000,
    autoHeight : true,
    transitionStyle:"fade",
    singleItem: true

  // "singleItem:true" is a shortcut for:
  // items : 1, 
  // itemsDesktop : false,
  // itemsDesktopSmall : false,
  // itemsTablet: false,
  // itemsMobile : false

  });
});
</script>
jquerycarouseltransitionsowl-carousel
7
user3001694

Pour la nouvelle version bêta, voir ci-dessous

Carrousel de hibou 1.3.2

Dans this version, il ne semble pas que le plug-in ait un paramètre pour cela. Vous pouvez le faire vous-même, avant ou après l’initialisation du plug-in.

Option 1 - avant l'initialisation du plugin

La meilleure approche serait que vous détectiez cette situation avant d’initialiser complètement le plugin.

Par exemple:

$(document).ready( function () {
    $owlContainer = $('#owl-demo');
    $owlSlides    = $owlContainer.children('div');

     // More than one slide - initialize the carousel
    if ($owlSlides.length > 1) {
        $owlContainer.owlCarousel({
         // options go here
        });
     // Only one slide - do something else
    } else {
        //...
    }
});


Option 2 - après l’initialisation du plugin

Il se peut que vous comptiez sur le plug-in pour styler et ajuster dynamiquement l'élément. Dans cette situation, vous pouvez détecter une seule diapositive après l'initialisation, puis arrêter les transitions. Vous pouvez le faire avec le callback afterInit et la méthode stop.

Par exemple:

$(document).ready( function () {
    $('#owl-demo').owlCarousel({
         // other options go here
         //...,
         afterInit: function() {
            $owlContainer = $('#owl-demo');
            $owlSlides    = $owlContainer.children('div');
              // Only one slide - stop the carousel
            if ($owlSlides.length == 1) {
               $owlContainer.stop();
            }
         }
    });
});

Chouette Carrousel 2 Beta

Dans cette nouvelle version remaniée du plugin, l'API a été complètement remplacée. Les mêmes approches sont toujours possibles, mais la mise en œuvre est un peu différente.

Option 1 - avant l'initialisation du plugin

La nouvelle API inclut désormais une option nommée autoplay, qui permet de contrôler directement le comportement du carrousel une fois qu'il est initialisé. Par défaut, cette option est définie sur false, mais vous pouvez la définir à votre guise en fonction du nombre de diapositives.

Par exemple:

$(document).ready( function () {
    $owlContainer = $('#owl-demo');
    $owlSlides    = $owlContainer.children('div');
    owlAutoPlay   = $owlSlide.length > 1;   

    $('#owl-demo').owlCarousel({
        // other options go here
        //...,
        autoplay: owlAutoPlay
    }
});

Alternativement, en fonction du nombre de diapositives, nous pouvons également choisir de ne pas initialiser complètement le plug-in, comme nous l'avons fait dans la version précédente (voir option 1 ci-dessus).


Option 2 - après l’initialisation du plugin

Comme dans la version précédente, si vous devez initialiser le plug-in (et si l'option autoplay est définie sur true), vous pouvez également arrêter le carrousel après l'initialisation. Cependant, dans cette version, l'option de rappel d'initialisation est maintenant nommée onInitialized. En outre, Il n'y a pas de méthode directe .stop(), mais vous devrez plutôt déclencher l'événement autoplay.stop.owl du carrousel.

Par exemple:

$(document).ready( function () {
    $('#owl-demo').owlCarousel({
        // Other options go here
        // ...,
        onInitialized: function() {
            if ($('#owl-demo').children().length == 1) {
                 $('#owl-demo').trigger('autoplay.stop.owl');
            }
        }
    });
});
16
Boaz

Vous pouvez vérifier s'il y a 1 élément dans votre carrousel et activer 'autoplay' ou pas. Dans votre cas, ce sera comme ci-dessous. 

$(document).ready(function () {

   $("#owl-demo").owlCarousel({

    navigation: false,
    stopOnHover: true,
    paginationSpeed: 1000,
    goToFirstSpeed: 2000,
    autoHeight : true,
    transitionStyle:"fade",
    singleItem: true
    autoPlay: $("#owl-demo > div").length > 1 ? 5000 : false

   });
});
1
Baris

J'ai remarqué que le problème avec le carrousel de la chouette et un seul élément est que l'élément ne s'affiche pas si vous souhaitez que le carrousel soit bouclé.

Vous trouverez ci-dessous un code que vous devriez mettre avant l'initiation du carrousel. J'ai également ajouté une option d'affichage et de masquage de la navigation, car vous ne souhaitez pas afficher les éléments de navigation pour une diapositive "non repliée":

// Calculate number of Slides
var totalItems = $('.item').length;

// If there is only one slide
if (totalItems == 1) {

    // Set loop option variable to false
    var isLooped = false;

    // Set nav option variable to false
    var isNav = false;

} else {

    // Set loop option variable to true
    var isLooped = true;

    // Set loop option variable to true
    var isNav = true;
}

// Initiate Carousel
$('.hpSlider').owlCarousel({
    //add in your dynamic variables to your options
    loop: isLooped,
    nav:isNav,
    // then any other options...
    margin:0,
    video:true,        
    mouseDrag:false,
    autoplay:true,
    autoplayTimeout:3500,
    autoplayHoverPause:true,
    navSpeed:1300,
    autoplaySpeed:1300,
    responsive:{
        0:{
            items:1
        },
        600:{
            items:1
        },
        1000:{
            items:1
        }
    }
});
0
Alex
function headerSlider(owlElementID){
    var autoPlay = 5000;
    if (!$(owlElementID).length){
        return false;
    }
    if ($(owlElementID).children().length <2) {
        autoPlay = false;
    }
    $(owlElementID).owlCarousel({
        autoPlay: autoPlay
0
ollio

Est-ce à la place puisque j'utilise déjà les exportations pour la configuration: 

exports.setup = function ($elems, options) {
    if (!!!$elems.length) {return false;}
    options = $.extend({}, defaultOptions, options);
    if (!!options.lazyLoad) {
        // See http://owlgraphic.com/owlcarousel/demos/lazyLoad.html
        $elems.find('img').each(function() {
            $(this).addClass('owl-lazy').data('src', $(this).attr('src'));
        });
    }
    //Disable autoplay for "one banner only" carousels:
     if($elems.find('img').length<2){
         options.autoplay=false;
    }

    $elems.owlCarousel(options);
        return $elems;
    };
    head.ready(function() {
        onload_window();
    });

   return exports;
}
0
David Karlsson

Insérez une instruction if/else dans la partie script de banner.tlp comme ceci:

<script type="text/javascript">

var onOff = "<?php echo sizeof($banners); ?>";

if(onOff !== "1") { 
  onOff = 5000;
} else {
  onOff = false;
}

<!--
$('#banner<?php echo $module; ?>').owlCarousel({
items: 6,
autoPlay: onOff,
singleItem: true,
navigation: true,
navigationText: ['<i class="fa fa-chevron-left fa-5x"></i>', '<i class="fa fa-chevron-right fa-5x"></i>'],
pagination: true,
transitionStyle: 'fade'
});
-->
</script>

Cela fonctionne bien avec la version du carrousel de hibou incluse dans Opencart 2.2.0.

0
Keyser Söze