O carrossel de coruja não será reproduzido automaticamente
Estou construindo um site wordpress com um carrossel JQuery usando oCarrossel de coruja 2 Plug-in JQuery. Eu usei esse carrossel antes com sucesso, mas estou perplexo com isso e preciso da sua ajuda. Espero que outras pessoas que enfrentam o mesmo problema possam fazer referência a esta solução com a qual todos ajudem.
O carrossel será carregado, as imagens serão exibidas e a maioria das opções que eu tentei estão funcionando, mas a reprodução automática não carregará a próxima imagem após 5 segundos. Todos os arquivos estão em seu devido lugar e carregando corretamente, como verificado usando o inspetor de rede Firebug.Agradecemos sua ajuda / sugestões com antecedência!
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>
Eu também tentei anexarowl.trigger('owl.play',6000); dentro da função document.ready por uma sugestão emeste encadeamento stackoverflow para nenhum proveito.