web-dev-qa-db-fra.com

Comment se fait-il que les points/boutons de navigation ne soient pas visibles avec le carrousel des hiboux?

Comment se fait-il que les boutons de navigation ne soient pas visibles?

J'utilise jQuery et owlcarousel ( http://owlgraphic.com/owlcarousel/ ).

http://jsfiddle.net/bobbyrne01/s10bgckL/1/

screenshot

html ..

<div id="owl-demo">
    <div class="item">
        <img src="http://placehold.it/50x50" alt="Owl Image" />
    </div>
    <div class="item">
        <img src="http://placehold.it/50x50" alt="Owl Image" />
    </div>
    <div class="item">
        <img src="http://placehold.it/50x50" alt="Owl Image" />
    </div>
    <div class="item">
        <img src="http://placehold.it/50x50" alt="Owl Image" />
    </div>
    <div class="item">
        <img src="http://placehold.it/50x50" alt="Owl Image" />
    </div>
    <div class="item">
        <img src="http://placehold.it/50x50" alt="Owl Image" />
    </div>
    <div class="item">
        <img src="http://placehold.it/50x50" alt="Owl Image" />
    </div>
    <div class="item">
        <img src="http://placehold.it/50x50" alt="Owl Image" />
    </div>
</div>

js ..

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

        autoPlay: 3000, //Set AutoPlay to 3 seconds
        dots: true,
        items: 2,
        itemsDesktop: [1199, 3],
        itemsDesktopSmall: [979, 3]
    });
});

css ..

#owl-demo .item {
    margin: 3px;
}
#owl-demo .item img {
    display: block;
    width: 50%;
    height: auto;
}
jqueryhtmlcssowl-carousel
9
bobbyrne01

Le fichier CSS modifié ne semble pas avoir de style pour cet élément: .owl-theme .owl-controls .owl-page span.

Voici les styles appliqués par la démonstration sur le site owlgraphic.com: http://jsfiddle.net/s10bgckL/2/

17
im1dermike
pagination:false,
navigation:true

essaye ça

5
Chamandeep

Je crois que le problème que vous rencontrez est que vous n’avez pas inclus le thème du hibou Carousel. Vous ne savez pas si vous utilisez le CDN, mais regardez ici: https://cdnjs.com/libraries/owl-carousel et assurez-vous d'inclure le CSS pour le thème en plus du CSS standard.

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/owl-carousel/1.3.3/owl.theme.min.css" />
0
John H.