Flexslider inside Modal Window (bootstrap 3.3.7 version)

[albertthedog]

Hi, I don't know .js but am building a website and its included and I have an issue with it. I want to put flexslider inside a modal. I have done this - but on load, the flexslider is min height and width. I saw this earlier post:

**> You need to initialize FlexSlider when you load the modal, in other words, on the click event or callback for the modal, you would call your .flexslider() method then. Not on window(load) or document(ready).

The reason for this is that if you don't, FlexSlider will think the height is zero.**

So I know what the issue is, I just don't know how you do the above.

My current .js in my page:

and the html with the modal and the flexslider placed inside:

    <div id="myModal2" class="modal fade">
      <div class="modal-dialog">
        <div class="modal-content">
          <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
            <h4 class="modal-title">Modal Title</h4>
          </div>
          <div class="modal-body">
             <section class="slider">
       <div class="flexslider">
         <ul class="slides">
           <li> <img src="images/kitchen_adventurer_cheesecake_brownie.jpg" width="400"  height="400"> </li>
           <li> <img src="images/kitchen_adventurer_lemon.jpg" width="400"  height="400"> </li>
           <li> <img src="images/kitchen_adventurer_donut.jpg" width="400"  height="400"> </li>
           <li> <img src="images/kitchen_adventurer_caramel.jpg" width="400"  height="400"> </li>
         </ul>
       </div>
     </section>
          </div>
        </div>
      </div>
    </div>
    <!-- Modal End-->

I am building a page which has 20 modals, and want to include different slides in each.

If anyone can help me on how to initialise flexslider when loading the modal, I would be very appreciative.

Thanks