Owl Carousel wird nicht automatisch wiedergegeben
Ich baue eine WordPress-Site mit einem JQuery-Karussell mit demOwl Carousel 2 JQuery-Plugin. Ich habe dieses Karussell schon einmal mit Erfolg benutzt, aber ich bin über dieses verblüfft und brauche Ihre Hilfe. Ich hoffe, dass andere, die möglicherweise auf dasselbe Problem stoßen, auf diese Lösung verweisen können, bei der Sie alle helfen.
Das Karussell wird geladen, Bilder werden angezeigt und die meisten Optionen, die ich ausprobiert habe, funktionieren. Die automatische Wiedergabe lädt das nächste Bild jedoch nicht nach 5 Sekunden. Alle Dateien befinden sich an der richtigen Stelle und werden ordnungsgemäß geladen. Dies wurde mithilfe des Firebug-Netzwerkinspektors überprüft. Vielen Dank für Ihre Hilfe / Anregungen im Voraus!
customjs.js:
$(document).ready(function(){
var owl = $(".owl-carousel");
owl.owlCarousel({
items: 1,
autoplay: true,
autoplayTimeout: 5000,
autoplayHoverPause: true
});
});
HTML:
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.1/jquery-ui.min.js"></script>
<script src="owl/js/owl.carousel.min.js"></script>
<script type="text/javascript" src="customjs.js"></script>
</head>
<body>
<div id="feature" class="full">
<!-- FEATURE ROTATOR -->
<div id="home-feature" class="owl-carousel owl-theme">
<div class="item">
<a href="#">
<img src="/images/home/rotator1.jpg"
alt="Feature 1"/>
</a>
</div>
<div class="item">
<a href="#">
<img src="/images/home/rotator2.jpg"
alt="Feature 2"/>
</a>
</div>
<div class="item">
<a href="#">
<img src="/images/home/rotator3.jpg"
alt="Feature 3"/>
</a>
</div>
<div class="item">
<a href="#">
<img src="/images/home/rotator4.jpg"
alt="Feature 4"/>
</a>
</div>
</div>
</div>
</body>
Ich habe auch versucht, @ anzufügowl.trigger('owl.play',6000); innerhalb der document.ready Funktion laut Vorschlag aufdieser Stapelüberlauf-Thread umsonst