Есть 2
owl carousel 2, каждый в своем табе.
В первой вкладке слайдер работает должным образом, но как только перехожу на вторую вкладку, то слайдер отображается некорректно: все сбивается в кучу.
Как я понимаю, это возникает из-за того, что первый таб скрыт.
В первой версии owl carousel, говорят, такой проблемы не возникает, но мне нужна именно вторая из-за некоторых фич.
Пробую навесить на ивент переключения таба перезагрузку
OWL-carousel trigger('refresh.owl.carousel'), но что-то делаю неправильно, т.к. эффекта никакого не наблюдается.
Как поправить?
фидл
$(document).ready(function() {
$("#owl-demo").owlCarousel({
nav: true,
responsive: {
0: {
items: 1
},
600: {
items: 3
},
1000: {
items: 3
}
}
});
$("#owl-demo2").owlCarousel({
nav: true,
responsive: {
0: {
items: 1
},
600: {
items: 3
},
1000: {
items: 3
}
}
});
$(".nav-tabs>li.active").click(function() {
$(".owl-carousel").trigger('refresh.owl.carousel');
});
});
<div class="tabbable">
<!-- Only required for left/right tabs -->
<ul class="nav nav-tabs">
<li class="active"><a href="#tab1" data-toggle="tab">Section 1</a>
</li>
<li><a href="#tab2" data-toggle="tab">Section 2</a>
</li>
</ul>
<div class="tab-content">
<div class="tab-pane active" id="tab1">
<p>I'm in Section 1.</p>
<div id="owl-demo" class="owl-carousel">
<div class="item">
<h1>1</h1>
</div>
<div class="item">
<h1>2</h1>
</div>
<div class="item">
<h1>3</h1>
</div>
<div class="item">
<h1>4</h1>
</div>
<div class="item">
<h1>5</h1>
</div>
<div class="item">
<h1>6</h1>
</div>
</div>
</div>
<div class="tab-pane" id="tab2">
<p>Howdy, I'm in Section 2.</p>
<div id="owl-demo2" class="owl-carousel">
<div class="item">
<h1>1</h1>
</div>
<div class="item">
<h1>2</h1>
</div>
<div class="item">
<h1>3</h1>
</div>
<div class="item">
<h1>4</h1>
</div>
<div class="item">
<h1>5</h1>
</div>
<div class="item">
<h1>6</h1>
</div>
</div>
</div>
</div>
</div>
