I need to insert a series of carousels in a number of Bootstrap tab panel, with one carousel per panel.
As one can see below, (jsfiddle here)
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
<style>
.span2 {
white-space:normal;
}
.item-block {
background-color: #ccc;
}
</style>
<div class="container">
<div class="row">
<div class="col-md-6">
<div class="panel with-nav-tabs panel-default">
<div class="panel-heading">
<ul class="nav nav-tabs">
<li class="active"><a href="#tab1default" data-toggle="tab">Default 1</a></li>
<li><a href="#tab2default" data-toggle="tab">Default 2</a></li>
</ul>
</div>
<div class="panel-body">
<div class="tab-content">
<div class="tab-pane active" id="tab1default">
<div id="slideshow2" class="cycle-slideshow"
data-cycle-fx=carousel
data-cycle-timeout=0
data-cycle-carousel-visible=1
data-cycle-carousel-fluid=true
data-cycle-pager="#pager1"
data-cycle-pager-template="<a href='#'><i class='fa fa-square' aria-hidden='true'></i></a>"
data-cycle-slides="> .span2"
>
<div class="pull-left cycle-prev"><a href="#"><i class="fa fa-chevron-left" aria-hidden="true"></i> Prev</a></div>
<div class="pull-right cycle-next"><a href="#">Next <i class="fa fa-chevron-right" aria-hidden="true"></i></a></div>
<div class="span2">
<div class="item-block col-md-4">
<img class="img-responsive" src="http://lorempixel.com/200/200/">
<div class="text-center">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus molestie porta leo, eget varius sem elementum eget. Fusce ullamcorper odio lacus, id auctor urna vulputate a. Vestibulum accumsan tortor ac massa aliquet, at feugiat metus faucibus. Phasellus sagittis dui at accumsan interdum. Vivamus eget tempus est. Curabitur semper feugiat risus, id consequat leo fermentum in. Suspendisse tristique interdum orci id pharetra. Sed sit amet sodales massa. </div>
</div>
<div class="item-block col-md-4">
<img class="img-responsive" src="http://lorempixel.com/200/200/">
<div class="text-center">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus molestie porta leo, eget varius sem elementum eget. Fusce ullamcorper odio lacus, id auctor urna vulputate a. Vestibulum accumsan tortor ac massa aliquet, at feugiat metus faucibus. Phasellus sagittis dui at accumsan interdum. Vivamus eget tempus est. Curabitur semper feugiat risus, id consequat leo fermentum in. Suspendisse tristique interdum orci id pharetra. Sed sit amet sodales massa. </div>
</div>
<div class="item-block col-md-4">
<img class="img-responsive" src="http://lorempixel.com/200/200/">
<div class="text-center">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus molestie porta leo, eget varius sem elementum eget. Fusce ullamcorper odio lacus, id auctor urna vulputate a. Vestibulum accumsan tortor ac massa aliquet, at feugiat metus faucibus. Phasellus sagittis dui at accumsan interdum. Vivamus eget tempus est. Curabitur semper feugiat risus, id consequat leo fermentum in. Suspendisse tristique interdum orci id pharetra. Sed sit amet sodales massa. </div>
</div>
</div>
<div class="span2">
<div class="col-md-4">
<img class="img-responsive" src="http://lorempixel.com/200/200/">
<div class="text-center">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus molestie porta leo, eget varius sem elementum eget. Fusce ullamcorper odio lacus, id auctor urna vulputate a. Vestibulum accumsan tortor ac massa aliquet, at feugiat metus faucibus. Phasellus sagittis dui at accumsan interdum. Vivamus eget tempus est. Curabitur semper feugiat risus, id consequat leo fermentum in. Suspendisse tristique interdum orci id pharetra. Sed sit amet sodales massa. </div>
</div>
<div class="col-md-4">
<img class="img-responsive" src="http://lorempixel.com/200/200/">
<div class="text-center">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus molestie porta leo, eget varius sem elementum eget. Fusce ullamcorper odio lacus, id auctor urna vulputate a. Vestibulum accumsan tortor ac massa aliquet, at feugiat metus faucibus. Phasellus sagittis dui at accumsan interdum. Vivamus eget tempus est. Curabitur semper feugiat risus, id consequat leo fermentum in. Suspendisse tristique interdum orci id pharetra. Sed sit amet sodales massa. </div>
</div>
<div class="col-md-4">
<img class="img-responsive" src="http://lorempixel.com/200/200/">
<div class="text-center">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus molestie porta leo, eget varius sem elementum eget. Fusce ullamcorper odio lacus, id auctor urna vulputate a. Vestibulum accumsan tortor ac massa aliquet, at feugiat metus faucibus. Phasellus sagittis dui at accumsan interdum. Vivamus eget tempus est. Curabitur semper feugiat risus, id consequat leo fermentum in. Suspendisse tristique interdum orci id pharetra. Sed sit amet sodales massa. </div>
</div>
</div>
</div>
<div class="text-center cycle-pager" id="pager1"></div>
</div>
<div class="tab-pane" id="tab2default">
<div id="slideshow1" class="cycle-slideshow"
data-cycle-fx=carousel
data-cycle-timeout=0
data-cycle-carousel-visible=1
data-cycle-carousel-fluid=true
data-cycle-pager="#pager2"
data-cycle-pager-template="<a href='#'><i class='fa fa-square' aria-hidden='true'></i></a>"
data-cycle-slides="> .span2"
>
<div class="pull-left cycle-prev"><a href="#"><i class="fa fa-chevron-left" aria-hidden="true"></i> Prev</a></div>
<div class="pull-right cycle-next"><a href="#">Next <i class="fa fa-chevron-right" aria-hidden="true"></i></a></div>
<div class="span2">
<div class="item-block col-md-4">
<img class="img-responsive" src="http://lorempixel.com/200/200/">
<div class="text-center">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus molestie porta leo, eget varius sem elementum eget. Fusce ullamcorper odio lacus, id auctor urna vulputate a. Vestibulum accumsan tortor ac massa aliquet, at feugiat metus faucibus. Phasellus sagittis dui at accumsan interdum. Vivamus eget tempus est. Curabitur semper feugiat risus, id consequat leo fermentum in. Suspendisse tristique interdum orci id pharetra. Sed sit amet sodales massa. </div>
</div>
<div class="item-block col-md-4">
<img class="img-responsive" src="http://lorempixel.com/200/200/">
<div class="text-center">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus molestie porta leo, eget varius sem elementum eget. Fusce ullamcorper odio lacus, id auctor urna vulputate a. Vestibulum accumsan tortor ac massa aliquet, at feugiat metus faucibus. Phasellus sagittis dui at accumsan interdum. Vivamus eget tempus est. Curabitur semper feugiat risus, id consequat leo fermentum in. Suspendisse tristique interdum orci id pharetra. Sed sit amet sodales massa. </div>
</div>
<div class="item-block col-md-4">
<img class="img-responsive" src="http://lorempixel.com/200/200/">
<div class="text-center">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus molestie porta leo, eget varius sem elementum eget. Fusce ullamcorper odio lacus, id auctor urna vulputate a. Vestibulum accumsan tortor ac massa aliquet, at feugiat metus faucibus. Phasellus sagittis dui at accumsan interdum. Vivamus eget tempus est. Curabitur semper feugiat risus, id consequat leo fermentum in. Suspendisse tristique interdum orci id pharetra. Sed sit amet sodales massa. </div>
</div>
</div>
<div class="span2">
<div class="col-md-4">
<img class="img-responsive" src="http://lorempixel.com/200/200/">
<div class="text-center">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus molestie porta leo, eget varius sem elementum eget. Fusce ullamcorper odio lacus, id auctor urna vulputate a. Vestibulum accumsan tortor ac massa aliquet, at feugiat metus faucibus. Phasellus sagittis dui at accumsan interdum. Vivamus eget tempus est. Curabitur semper feugiat risus, id consequat leo fermentum in. Suspendisse tristique interdum orci id pharetra. Sed sit amet sodales massa. </div>
</div>
<div class="col-md-4">
<img class="img-responsive" src="http://lorempixel.com/200/200/">
<div class="text-center">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus molestie porta leo, eget varius sem elementum eget. Fusce ullamcorper odio lacus, id auctor urna vulputate a. Vestibulum accumsan tortor ac massa aliquet, at feugiat metus faucibus. Phasellus sagittis dui at accumsan interdum. Vivamus eget tempus est. Curabitur semper feugiat risus, id consequat leo fermentum in. Suspendisse tristique interdum orci id pharetra. Sed sit amet sodales massa. </div>
</div>
<div class="col-md-4">
<img class="img-responsive" src="http://lorempixel.com/200/200/">
<div class="text-center">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus molestie porta leo, eget varius sem elementum eget. Fusce ullamcorper odio lacus, id auctor urna vulputate a. Vestibulum accumsan tortor ac massa aliquet, at feugiat metus faucibus. Phasellus sagittis dui at accumsan interdum. Vivamus eget tempus est. Curabitur semper feugiat risus, id consequat leo fermentum in. Suspendisse tristique interdum orci id pharetra. Sed sit amet sodales massa. </div>
</div>
</div>
</div>
<div class="text-center cycle-pager" id="pager2"></div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<script src="https://malsup.github.com/jquery.cycle2.js"></script>
<script src="https://malsup.github.com/jquery.cycle2.carousel.js"></script>
the carousel in the first tab panel works fine, we can flip between slides.
However, the second tab panel does not render the carousel correctly. Curiously, when one opens the Chrome inspector/console with the second tab panel selected, the carousel gets rendered correctly and functioning.
At this point, clicking the first tab reveals that the first tab panel is now rendered incorrectly. Furthermore, closing the Chrome inspector at this stage actually fixes the incorrectly rendered content of the first tab panel.
Could this be a bug with Cycle2, or I am just missing something here?
I was thinking about it some more this morning, and had the idea of doing a reinit of the carousel on the tab click event:
<script>
$( document ).ready(function() {
$('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
$('.cycle-slideshow').cycle('reinit');
});
});
</script>
Seems it works just fine for now. Updated the jsfiddle here.