How to initiate image slider after element is displayed

Issue

I am currently having a problem where my flexslider image gallery is initializing upon pageload and breaking the functionality. This is because the flexslider is contained in a collapsed jQuery mobile tab that is set to display: none.

The actual div that holds the collapsible content is generated in the jQuery mobile script, and cannot have a custom ID attached to it in the front end. I have inserted an additional container that is set to display:none so that I can initialize the slider after that element is visible.

This is the code that I currently have and isn’t working:

<script type="text/javascript">
    
$(document).ready(function(){

    $('#first_tab').click(function(){
    
        $('#slider_contents').css('display', 'block'){
    });
});
        
    if ($('#slider_contents').is(':visible')) {
        
            $('.flexslider').flexslider({
              animation: "slide",
             controlsContainer: ".flex-container"

            });
            
         } else {}
    });
</script>

HTML markup:

<div data-role="collapsible" id="first_tab">
            <h3>WORK</h3>
            <div id="slider_contents">
                <div class="flex-container">
                    <div class="flexslider">
                    <ul class="slides">
                        <li>
                            <img src="img/inacup_samoa.jpg" />
                            <p class="flex-caption">Captions and cupcakes. Winning combination.</p>
                        </li>
                        <li>
                            <a href="#"><img src="img/inacup_pumpkin.jpg" /></a>
                            <p class="flex-caption">This image is wrapped in a link!</p>
                        </li>
                        <li>
                            <img src="img/inacup_donut.jpg" />
                        </li>
                        <li>
                            <img src="img/inacup_vanilla.jpg" />
                        </li>
                    </ul>
                  </div>
                </div>
</div>

CSS styles:

#slider_contents{
     max-width: 620px;
     margin: 0 auto;
     display: none;
     }

      .flexslider {width: 100%; margin: 0; padding: 0;}
      .flexslider .slides > li {display: none;} /* Hide the slides before the JS is loaded.        Avoids image jumping */
       .flexslider .slides img {max-width: 100%; display: block;}
       .flex-pauseplay span {text-transform: capitalize;}

Any assistance would be greatly appreciated. I have tried so many different things and nothing seems to work.

Solution

You have an unwanted { at the end of here

$('#slider_contents').css('display', 'block'){

Also the if statement is outside the .ready function

Try this

<script type="text/javascript">

  $(document).ready(function(){

    $('#first_tab').click(function(){

        $('#slider_contents').css('display', 'block');

    });

    if ($('#slider_contents').is(':visible')) {

        $('.flexslider').flexslider({
          animation: "slide",
         controlsContainer: ".flex-container"

        });

     } else {}

  });


</script>

Answered By – Sean H Jenkins

This Answer collected from stackoverflow, is licensed under cc by-sa 2.5 , cc by-sa 3.0 and cc by-sa 4.0