web-dev-qa-db-fra.com

owlcarousel - les points n'apparaissent pas

Je travaille sur un projet et comme mes connaissances en javascript sont très limitées, j'ai décidé d'utiliser owlcarousel. tout fonctionnait bien mais maintenant je fais face à un problème.

J'ai défini les points sur vrai, mais ils n'apparaissent pas. Mon travail jusqu'à présent est le suivant:

.container {
        width: 90%;
        margin: 0 auto;
}

/*Text over image*/
.item {
        width: 100%;
}

.item img {
   display: block;
   max-width:100%;
}


/*Carousel Nav Buttons*/

.carousel-nav-left{
    height: 30px;
    font-size: 30px;
    position: absolute;
    top: 0%;
    bottom: 0%;
    margin: auto 0;
    margin-left: -40px;
}

.carousel-nav-right{
    height: 30px;
    font-size: 30px;
    position: absolute;
    top: 0%;
    bottom: 0%;
        right: 0%;
    margin: auto 0;
    margin-right: -40px;
}


@media (max-width: 700px) {
        
        .carousel-nav-left{
                margin-left: -30px;
        }

        .carousel-nav-right{
                margin-right: -30px;
        }
        
        .container {
                width: 85%;
        }
}

@media (max-width: 410px) {
        
        .carousel-nav-left{
                margin-left: -25px;
        }

        .carousel-nav-right{
                margin-right: -25px;
        }
}
<!DOCTYPE html>
<html lang="en">
    <head>
        <title>owlcarousel</title>
                <meta charset="UTF-8" />
                <meta name="viewport" content="width=device-width, initial-scale=1.0">
                <link rel="stylesheet" type="text/css" href="css/style.css" />
                <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/owl-carousel/1.3.3/owl.carousel.css" />
                <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css">
    </head>
        
    <body>
                <div class="container">
                        <div class="carousel">
                        
                                <div class="item">
                                        <img src="http://placehold.it/350x250"  alt="" />
                                </div>
                                
                                <div class="item">
                                        <img src="http://placehold.it/350x250"  alt="" />
                                </div>
                                
                                <div class="item">
                                        <img src="http://placehold.it/350x250"  alt="" />
                                </div>
                                
                                <div class="item">
                                        <img src="http://placehold.it/350x250"  alt="" />
                                </div>
                                
                                <div class="item">
                                        <img src="http://placehold.it/350x250"  alt="" />
                                </div>
                                
                                <div class="item">
                                        <img src="http://placehold.it/350x250"  alt="" />
                                </div>
                                
                        </div>
                </div>
                <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
                <script src="https://cdnjs.cloudflare.com/ajax/libs/owl-carousel/1.3.3/owl.carousel.min.js"></script>
                <script>
                        (function($){
        
                                $('.carousel').owlCarousel({
                                        items: 4,
                                        loop:true,
                                        margin:10,
                                        nav:true,
                                        navText: ["<span class='carousel-nav-left'><i class='fa fa-chevron-left'></i></span>","<span class='carousel-nav-right'><i class='fa fa-chevron-right'></i></span>"],
                                        dots: true,
                                        paginationSpeed: 300,
                                        rewindSpeed: 400,
                                        responsive:{
                                                0:{
                                                        items:1
                                                },
                                                490:{
                                                        items:2
                                                },
                                                770:{
                                                        items:3
                                                },
                                                1200:{
                                                        items:4
                                                },
                                                1500:{
                                                        items:5
                                                }
                                        }
                                })
                                
                        })(jQuery);
                </script>
        </body>
</html>

Veuillez me faire savoir comment résoudre ce problème

javascriptcssowl-carousel
19
user6247447

Assurez-vous d'avoir inclus toutes les ressources nécessaires:

  • jquery-2.1.1.min.js
  • owl.carousel.min.js
  • owl.carousel.min.css

Assurez-vous également que votre CSS inclut la page owl et les contrôles owl appropriés

Voici un exemple de code CSS vital:

.owl-theme .owl-controls .owl-page {
    display: inline-block;
}
.owl-theme .owl-controls .owl-page span {
    background: none repeat scroll 0 0 #869791;
    border-radius: 20px;
    display: block;
    height: 12px;
    margin: 5px 7px;
    opacity: 0.5;
    width: 12px;
}

Comme vu dans This JSFiddle .

Notez que si vous supprimez le dots: true à partir du code JSFiddle (et exécutez-le), les "points" de pagination s'affichent toujours. Cependant, si vous supprimez le CSS ci-dessus, les points ne s'affichent pas.

Réponse supplémentaire

Comme il s'agit de la réponse acceptée, j'ajouterai un autre correctif potentiel fourni par @Kevin Vincendeau et signalé par @Amr Ibrahim dans les commentaires.

Vérifiez que votre code HTML inclut toutes les classes nécessaires. Tel que owl-carousel et owl-theme sur le conteneur principal.

13
Danny Mahoney

J'ai également rencontré le même problème lors de la première utilisation du curseur Owl sur ma page Web. Je ne pouvais pas voir la navigation des points et je me suis dit que cela pouvait être un bug et j'ai décidé de faire une enquête.

J'ai pensé plus tard qu'il fallait inclure 2 fichiers css. L'un est le own-carousel.min.css et l'autre est owl.theme.default.min.css. Après cela, le conteneur div doit avoir le owl-carousel et owl-theme classe dans leur liste de classes. Par exemple:

<div id="slider" class="owl-carousel owl-theme">
        <img src="/dist/assets/img1.jpg" /> 
        <img src="/dist/assets/img2.jpg" /> 
        <img src="/dist/assets/img3.jpg" /> 
        <img src="/dist/assets/img4.jpg" />
</div>

J'espère que cela aidera les personnes confrontées à ce problème plus tard.

43
Tojo Chacko

Des classes owl-carousel et owl-theme sur le conteneur principal sont nécessaires pour que les points apparaissent.

18
Kevin Vincendeau

Le point était le manque de owl-theme classe dans votre code!

Inclure les ressources CSS et JS 

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.carousel.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.theme.default.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/owl.carousel.min.js"></script>

Configurez votre code HTML 

<div class="owl-carousel owl-theme">
  <div> Content 1 </div>
  <div> Content 2</div>
  <div> Content 3</div>
  <div> Content 4</div>
  <div> Content 5</div>
  <div> Content 6</div>
  <div> Content 7</div>
</div>

Remarque: si vous ne ajoutez pas le owl-theme classe dans le parent Div alors la dose Dots ne vous apparaît pas. Il est donc nécessaire de les rendre visibles pour les utilisateurs finaux.

Appelez le plugin

Appelez maintenant la fonction d'initialisation Owl et votre carrousel est prêt.

$(function(){
  $(".owl-carousel").owlCarousel();
});

Démo:

enter image description here

$(function(){
    $(".owl-carousel").owlCarousel();        
});
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.carousel.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.theme.default.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/owl.carousel.min.js"></script>
    
<!-- Set up your HTML -->
<div class="owl-carousel owl-theme">
  <div> Content 1 </div>
  <div> Content 2</div>
  <div> Content 3</div>
  <div> Content 4</div>
  <div> Content 5</div>
  <div> Content 6</div>
  <div> Content 7</div>
</div>
1
RAM