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.

InformationsquelleAutor jsg | 2015-02-05