Initiate function on href click

JavaScript
1

I am working with 3 flexslider slideshows on one page. I had them working just fine until I put them into separate jquery tabs.

The first slideshow works fine, but the 2nd & 3rd slide shows don’t appear when I click on the tab that they are in. I was reading that jquery can’t act on the 2nd & 3rd slide shows because they are hidden.

Someone had the solution to initiate the functions for the 2nd & 3rd slide show when their respective tabs are clicked. I’ve tried that on slideshow 2, but I can’t get it to work.

Can someone give me a hint or idea of what might be wrong?

$('a[href="#messages"]').click(function() {
  // The slider being synced must be initialized first
  $('#carousel3').flexslider({
    animation: "slider",
    controlNav: false,
    animationLoop: false,
    slideshow: false,
    itemWidth: 210,
    itemMargin: 5,
    asNavFor: '#slider3'
  });
 
  $('#slider3').flexslider({
    animation: "slide",
    controlNav: false,
    animationLoop: false,
    slideshow: false,
    sync: "#carousel3"
  });
});

 <!-- Nav tabs -->
                  <ul class="nav nav-tabs ContentArea col-xs-8" role="tablist">
                    <li role="presentation" class="active"><a href="#ConceptualDesign" aria-controls="ConceptualDesign" role="tab" data-toggle="tab">Conceptual Design & 3D Rendering</a></li>
                    <li role="presentation"><a href="#PlantingPlans" aria-controls="PlantingPlans" role="tab" data-toggle="tab">Planting Plans</a></li>
                    <li role="presentation"><a href="#FinishedProject" aria-controls="FinishedProject" role="tab" data-toggle="tab">Finished Project</a></li>
                  </ul>


<div role="tabpanel" class="tab-pane" id="FinishedProject"> <!--flexslider code is here ---> </div>
2

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.