owlcarousel - les points n'apparaissent pas
Je suis en train de travailler sur un projet et que mes connaissances en javascript sont très limitées, j'ai décidé d'utiliser owlcarousel
. tout fonctionnait bien, mais maintenant, je suis confronté à un problème.
J'ai mis les points pour vrai, mais ils n'apparaissent pas. Mon travail jusqu'à présent est la suivante:
CSS:
.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;
}
}
HTML:
<!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>
S'il vous plaît laissez-moi savoir comment je peux résoudre ce problème
- Salut, est-ce vivre quelque part? Un lien serait vraiment nous aider à enquêter. Merci
- Double Possible de Comment se fait-points/boutons de navigation ne sont pas visiable à l'aide de owlcarousel?
Vous devez vous connecter pour publier un commentaire.
Assurer que vous avez inclus toutes les ressources nécessaires:
Aussi, assurez-vous que votre CSS intègre le hibou-page et owl-contrôles
Voici un exemple de vital code CSS:
Comme on le voit dans Cette JSFiddle.
Notez que si vous supprimez la
dots: true
de la JSFiddle code (et exécuter) la pagination des "points" toujours afficher. Toutefois, si vous supprimez le CSS ci-dessus, les points ne s'affichent pas.Réponse Supplémentaire
Que c'est la réponse que je vais ajouter une autre solution potentielle fournie par @Kevin Vincendeau et portées à l'attention de @Amr Ibrahim dans les commentaires.
Assurez-vous que votre code HTML est, y compris toutes les classes nécessaires. Comme
owl-carousel
etowl-theme
sur le conteneur principal.J'ai aussi été confronté au même problème lors de l'utilisation de la Chouette curseur pour la première fois sur ma page web. Je ne pouvais pas voir les points de navigation et je me suis dit c'est peut être un bug et a décidé de faire quelques recherches.
J'ai compris plus tard qu'il y a 2 fichiers css doivent être incluses. L'un est le
own-carousel.min.css
et l'autre estowl.theme.default.min.css
. Après cela, le div conteneur doit avoir laowl-carousel
etowl-theme
classe dans sa liste de classe. Pour l'e.g:Espère que cette aide pour les personnes qui sont confrontées à ce problème plus tard.
Classes
owl-carousel
etowl-theme
sur conteneur principal sont nécessaires pour que les points apparaissent.Inclure CSS & JS ressources
Configurer votre HTML
Appeler le plugin
Maintenant appel de la Chouette d'initialiseur de la fonction et votre manège est prêt.
Démo:
JS:
HTML: