Owl carousel et bootstrap onglet sur une page
Je suis en train de construire une page à l'aide de deux bootstrap et un Owl carousel, Owl carousel fit l'objet du site plutôt que s'amorce la version. Donc j'ai un onglet structure où je veux mettre un carrousel sur chaque page, mais toutes mes tentatives ont échoué. Voici mon code
<div role="tabpanel">
<!-- Nav tabs -->
<ul class="nav nav-tabs" role="tablist">
<li role="presentation" class="active"><a href="#home" aria-controls="home" role="tab" data-toggle="tab">Home</a></li>
<li role="presentation"><a href="#profile" aria-controls="profile" role="tab" data-toggle="tab">Profile</a></li>
<li role="presentation"><a href="#messages" aria-controls="messages" role="tab" data-toggle="tab">Messages</a></li>
<li role="presentation"><a href="#settings" aria-controls="settings" role="tab" data-toggle="tab">Settings</a></li>
</ul>
<!-- Tab panes -->
<div class="tab-content">
<div role="tabpanel" class="tab-pane active" id="home">
<div class="owl-carousel" id="owl1">
<div> content</div>
<div> content</div>
</div>
</div>
<div role="tabpanel" class="tab-pane" id="profile">
<div class="owl-carousel" id="owl2">
<div> content</div>
<div> content</div>
</div>
<div role="tabpanel" class="tab-pane" id="messages">
<div class="owl-carousel" id="owl3">
<div> content</div>
<div> content</div>
</div>
</div>
<div role="tabpanel" class="tab-pane" id="settings">
<div class="owl-carousel" id="owl4">
<div> content</div>
<div> content</div>
</div>
</div>
</div>
</div>
Voici mon javascript
$(document).ready(function () {
$('#owl1').owlCarousel({
loop: true,
margin: 10,
responsiveClass: true,
responsive: {
0: {
items: 1,
nav: true
},
600: {
items: 1,
nav: false
},
1000: {
items: 1,
nav: true,
loop: false
}
}
});
$('#owl2').owlCarousel({
loop: true,
margin: 10,
responsiveclass: true,
responsive: {
0: {
items: 1,
nav: true
},
600: {
items: 1,
nav: false
},
1000: {
items: 1,
nav: true,
loop: false
}
}
});
$('#owl3').owlCarousel({
loop: true,
margin: 10,
responsiveclass: true,
responsive: {
0: {
items: 1,
nav: true
},
600: {
items: 1,
nav: false
},
1000: {
items: 1,
nav: true,
loop: false
}
}
});
$('#owl4').owlCarousel({
loop: true,
margin: 10,
responsiveclass: true,
responsive: {
0: {
items: 1,
nav: true
},
600: {
items: 1,
nav: false
},
1000: {
items: 1,
nav: true,
loop: false
}
}
});
//});
http://www.owlcarousel.owlgraphic.com/docs/api-events.html
- Est-ce votre littérale HTML ou vous avez simplifié? Parce qu'il manque tout de la Chouette carrousel des classes sans qui cela ne fonctionne pas.
- yep c'est à peu près à partir du début
- quelle est la version de bootstrap utilisez-vous, pouvez-vous le mettre sur jsfidle veuillez
- Ive a eu quelques difficultés à essayer de mettre cela sur jsfiddle, mais c'est la dernière version de bootstrap et owl carousel
- Pouvez-vous utiliser cette jsfiddle comme un point de départ (jsfiddle.net/67zq4f4o)? Qu'est-ce exactement ne fonctionne pas pour vous?
- Eh bien comme vous pouvez le voir sur l'exemple, le premier onglet est ok, mais sur le deuxième et le troisième onglet montre toutes les carrousels à la fois
- Owl Carousel nécessite la capacité de voir la totalité de la largeur d'un élément à bien espacer sur la création lors de l'utilisation de la largeur auto fonctionnalité. Les éléments cachés présenter un problème lors de l'utilisation de la largeur auto fonctionnalité qu'il est incapable de détecter la largeur réelle. Depuis la version 2.0 est encore en version bêta, pas toutes les fonctionnalités seront en parfait état de marche, mais je suggère d'essayer d'appeler le redimensionner/actualiser les cas où le bootstrap spectacle.bs.onglet événement est déclenché, ou montré.bs.onglet événement.
Vous devez vous connecter pour publier un commentaire.
Tout d'abord, j'ai remarqué une erreur dans votre code html. Il vous manque une fermeture
</div>
numéro de série de votre onglet deuxième volet. C'est de jeter une partie de la structure de votre balise.Après des recherches et de jouer avec cela, il semble que c'est un problème connu. Elle vient du fait que s'Amorce onglets sont cachés à l'origine. Lorsque vous essayez d'initialiser un OwlCarousel à l'intérieur d'un élément masqué, les choses vont mal, parce que les éléments cachés ont pas de largeur, de sorte que la Chouette ne sais pas combien d'espace il a à travailler avec.
Ma solution est d'attendre jusqu'à ce qu'un onglet est affiché pour initialiser le carrousel, détruire le carrousel à chaque fois que l'onglet est masqué. Il se sent en quelque sorte hackish pour moi, mais il fonctionne. Voici mon code JavaScript:
Et voici un travail jsFiddle: http://jsfiddle.net/voveson/67zq4f4o/1/
Espérons que cela aide, et si oui je le ferai un plaisir d'accepter votre générosité! Cheers! 🙂
Pas plus de javascript nécessaire que le owl carousel option.
Il suffit de remplacer les lignes suivantes dans le fichier de bootstrap.css et tout devrait bien fonctionner.
C'est la meilleure solution:
https://www.youtube.com/watch?v=tKrt9ev4S24
Cher ami, vous pouvez mettre le morceau de code suivant à la place de "la chouette.carrousel.css" jusqu'à ce que le problème est résolu.
CSS:
Vous n'avez pas besoin de faire quelque chose avec jQuery pour afficher owl carousel dans le bootstrap onglet.
Si vous voulez prendre owl carousel dans l'onglet alors vous devriez donner même Id à chaque owl carousel avec le même
class="owl-carousel"
.Codepen
JS:
HTML: