dids dids - 3 months ago 15
Javascript Question

Two or more Flexslider2 within Bootstrap tabs

I have a problem creating a gallery page. I am using Bootstrap as a base an get on fine with it. I have looked at various sliders and carousels and have chosen Flexslider2 - it works great and looks great and is working great as a single slider.

However I now want to use 4 Flexsliders, one on each tab for a gallery page. Ok so I could have 4 pages but it would look better on just 1 page.

I am very new to Javascript but do know html (but not DOM). My example below is just setup for 2 Flexsliders for simplicity.

When my page fires the initial Flexslider is fine but when I switch tabs the second one isn't shown, there are no errors but when I put an alert on the screen as the second Flexslider is initialised it then shows. This is pointing to a DOM issue but I can't seem to find the solution.

HTML;

<div class="row-fluid">
<div class="span9">
<section id="tabs">
<div class="bs-docs-example">
<ul class="nav nav-tabs" id="myTab">
<li class="active"><a href="#home">Home</a></li>
<li><a href="#profile">Profile</a></li>
</ul>
<div class="tab-content">
<div class="tab-pane active" id="home">
<p>this is tab1 (0)</p>
<section class="slider">
<div id="slider1" class="flexslider">
<ul class="slides">
<li> <img src="assets/gallery/slide1.jpg" /> </li>
<li> <img src="assets/gallery/slide2.jpg" /> </li>
<li> <img src="assets/gallery/slide3.jpg" /> </li>
<li> <img src="assets/gallery/slide4.jpg" /> </li>
</ul>
</div>
<div id="carousel1" class="flexslider">
<ul class="slides">
<li> <img src="assets/gallery/slide1.jpg" /> </li>
<li> <img src="assets/gallery/slide2.jpg" /> </li>
<li> <img src="assets/gallery/slide3.jpg" /> </li>
<li> <img src="assets/gallery/slide4.jpg" /> </li>
</ul>
</div>
</section>
</div>
<div class="tab-pane" id="profile">
<p>this is tab2 (1)</p>
<section class="slider">
<div id="slider2" class="flexslider">
<ul class="slides">
<li> <img src="assets/gallery/slide2.jpg" /> </li>
<li> <img src="assets/gallery/slide3.jpg" /> </li>
<li> <img src="assets/gallery/slide4.jpg" /> </li>
<li> <img src="assets/gallery/slide1.jpg" /> </li>
</ul>
</div>
<div id="carousel2" class="flexslider">
<ul class="slides">
<li> <img src="assets/gallery/slide2.jpg" /> </li>
<li> <img src="assets/gallery/slide3.jpg" /> </li>
<li> <img src="assets/gallery/slide4.jpg" /> </li>
<li> <img src="assets/gallery/slide1.jpg" /> </li>
</ul>
</div>
</section>
</div>
</div>
</div>
<hr class="bs-docs-separator">
</section>
</div>
</div>


And the javascript is;

<script type="text/javascript">
$('#myTab a').click(function (e) {
e.preventDefault();
alert("just about to call initflex");
initflexsliders();
$(this).tab('show');
})
</script>

<script type="text/javascript">
$(window).load(function(){
initflexsliders();
});
</script>

<script type="text/javascript">
function initflexsliders(){
$('#carousel1').flexslider({
animation: "slide",
controlNav: false,
animationLoop: false,
slideshow: false,
itemWidth: 100,
itemMargin: 5,
asNavFor: '#slider1'
});

$('#slider1').flexslider({
animation: "slide",
controlNav: false,
animationLoop: false,
slideshow: false,
sync: "#carousel1",
});
$('#carousel2').flexslider({
animation: "slide",
controlNav: false,
animationLoop: false,
slideshow: false,
itemWidth: 100,
itemMargin: 5,
asNavFor: '#slider2'
});

$('#slider2').flexslider({
animation: "slide",
controlNav: false,
animationLoop: false,
slideshow: false,
sync: "#carousel2",
});
}
</script>


Has anyone got any ideas? I expect it is something simple but its got me pulling my hair out?

Answer

Played around a little bit, and it seems that you should not initialize every slider on page load, instead just call it on each tab separately.

The fiddle: http://jsfiddle.net/qSqpD/709/

$('#myTab a:first-child').click(function (e) {
e.preventDefault();
$(this).tab('show'); 
  $('#carousel1').flexslider({
        animation: "slide",
        controlNav: false,
        animationLoop: false,
        slideshow: false,
        itemWidth: 400,
        itemMargin: 5,
        asNavFor: '#slider1'
      });
  });

Hope it helps