web-dev-qa-db-fra.com

Owl Carousel ne jouera pas automatiquement

J'utilise le carrousel de la chouette sur mon site. Selon leur documentation, cette partie de JavaScript devrait fonctionner:

<script>
$("#intro").owlCarousel({

// Most important owl features

//Autoplay
autoPlay : 5000,
stopOnHover : false
)}
</script>

Mais pour une raison quelconque, il ne jouera pas automatiquement. Voici le code HTML du curseur:

<div id="intro" class="owl-carousel">
    <div class="item first">
      <div class="container">
        <div class="row">
          <div class="carousel-caption-left colour-white">
            <h2>Title Text</h2>
            <h1>Sub title text here.</h1>
            <p>If you like you can even add a sentence or two here.</p>
          </div>
        </div>
      </div>
      <div class="overlay-bg"></div>
    </div>
    <div class="item second">
      <div class="container">
        <div class="carousel-caption-left colour-white">
          <h2>Title Text</h2>
          <h1>Sub title text here.</h1>
          <p>If you like you can even add a sentence or two here.</p>
        </div>
      </div>
      <div class="overlay-bg"></div>
    </div>
    <div class="item third">
      <div class="container">
        <div class="carousel-caption-left colour-white">
          <h2>Title Text</h2>
          <h1>Sub title text here.</h1>
          <p>If you like you can even add a sentence or two here.</p>
        </div>
      </div>
      <div class="overlay-bg"></div>
    </div>
</div>
javascripthtmlowl-carousel
18
thedoggydog

Oui, c'est une faute de frappe.

Écrire

lecture automatique

ne pas

lecture automatique

Le code du plugin autoplay définit la variable comme "autoPlay".

63
Matthias from Berlin

Vous êtes peut-être sur la mauvaise version du doc ​​de hibou.

autoPlay is for 1st version

autoplay is for 2nd version
24
1ronmat

Changer la lecture automatique en lecture automatique seule ne fonctionnait pas pour moi. L'astuce consistait à ajouter les propriétés autoplaySpeed ​​et autoplayTimeout et à leur attribuer la même valeur, comme suit:

$(document).ready(function(){
    var owl = $(".owl-carousel");
    owl.owlCarousel({
        items: 1,
        autoplay: true,
        autoPlaySpeed: 5000,
        autoPlayTimeout: 5000
        autoplayHoverPause: true
    });
});

Voici une démo de travail: JS Bin

Plus d'informations à ce sujet peuvent être trouvées ici: https://github.com/smashingboxes/OwlCarousel2/issues/234

10
xVee

ajoute ça

owl.trigger('owl.play',6000);
5
M Arfan

Vous devez définir les propriétés autoplay et autoplayTimeout . J'ai utilisé ce code, et cela fonctionne pour moi:

$('.owl-carousel').owlCarousel({
                autoplay: true,
                autoplayTimeout: 5000,
                navigation: false,
                margin: 10,
                responsive: {
                    0: {
                        items: 1
                    },
                    600: {
                        items: 2
                    },
                    1000: {
                        items: 2
                    }
                }
            })
4
Hossein Hashemi

Ce code devrait fonctionner pour vous

$("#intro").owlCarousel ({

        slideSpeed : 800,
        autoPlay: 6000,
        items : 1,
        stopOnHover : true,
        itemsDesktop : [1199,1],
        itemsDesktopSmall : [979,1],
        itemsTablet :   [768,1],
      });
4
frank john

Dans mon cas lecture automatique ne fonctionne pas mais lecture automatique fonctionne bien 

Je ne l'ai utilisé que 

<script src="plugins/owlcarousel/owl.carousel.js"></script>

no owl.autoplay.js est nécessaire et ma version du carrousel hibou est @version 2.0.0 

espérons que cette chose vous aidera :)

2
Zaheer Ahmad

Votre Javascript devrait être

<script>
$("#intro").owlCarousel({

// Most important owl features

//Autoplay
autoplay: false,
autoplayTimeout: 5000,
autoplayHoverPause: true
)}
</script>
1
XIMRX

Si vous utilisez v1.3.3, utilisez ensuite la propriété suivante

autoPlay : 5000

Or En utilisant la dernière version, puis utilisez la propriété suivante

autoPlay : true
1
Ahmed Awan

La définition de autoPlay: true n'a pas fonctionné pour moi . Mais la définition de autoPlay: 5000 a fonctionné.

1
aryalprakash

Juste une erreur de frappe,

<script>
$("#intro").owlCarousel({

// Most important owl features

//Autoplay
autoPlay : 5000,
stopOnHover : false
)} ----- TYPO
</script>

CA devrait etre-

<script>
$("#intro").owlCarousel({

// Most important owl features

//Autoplay
autoPlay : 5000,
stopOnHover : false
}) ----- Correct
</script>
1
Neil

Avec la version 2.3.4, vous devez ajouter le plugin owl.autoplay.js . Ensuite, procédez comme suit:

var owl = $('.owl-carousel');
owl.owlCarousel({
   items:1, //how many items you want to display
    loop:true,
    margin:10,
    autoplay:true,
    autoplayTimeout:10000,
    autoplayHoverPause:true
});
0
israel

  1. Vous devez d’abord appeler le fichier owl.autoplay.js.

  2. ce code fonctionne pour moi: owl.trigger ('play.owl.autoplay', [1000]); 

0
Kako Sabolo