Flex slider not working unless click a inspect using javascript

Here is my code

       <div class="modal fade" id="" tabindex="-1" role="dialog" aria-labelledby="" aria-hidden="true"> 
      <div class="modal-dialog" style="width:65%">        
     <div class="modal-content login-modal">            
   <div class="modal-header login-modal-header">              
   <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
  <h4 class="modal-title text-center" id="loginModalLabel"></h4>
   </div>            
 <div class="modal-body">              
 <div class="text-center">                   
 <div class="row">                                                               
 <div class="col-sm-7"> 
 <div class="flexslider">
  <ul class="slides">
 <?php foreach($product_get_img as $x)
   {?>
        <li data-thumb="">
            <div class="thumb-image"> 
            <img src="" data-imagezoom="true" class="img-responsive"> </div>
        </li>
        <?php
     }
   ?>
      </ul>

     </div>
     </div>                               
 <div class="col-sm-5" style="margin-top: 35px;border-left:1px dashed silver">
  <h2 class="step1-heading"></h2>                     
   <img src="<?php echo url(); ?>/assets/images/stars.png"> 
<span class="step1-para">2892 Ratings &nbsp;&nbsp;&nbsp; | &nbsp;&nbsp;&nbsp;400 Reviews &nbsp;&nbsp;&nbsp;| &nbsp;&nbsp;<a href="contact.php" class="step1-para">Have a Question?</a></span>
<div style="padding-top: 11px;">         
<div class="row" style="margin-bottom: 7px;">                  
<div class="col-xs-4 step1-para">MRP</div>                     
 <div class="col-xs-8  gre">                     
 <span class="step1-para">$</span>&nbsp;<s class="strike step1-para">    <span>999</span></s> [<span class="gre">50</span>% OFF] 
 </div>                  
 </div>                  
     <div class="row">                     
      <div class="col-xs-4 gre">Save</div>                     
      <div class="col-xs-8 gre">                     
   $&nbsp;                     
      <span class="gre"> 500</span>
 </div>                  
  </div>                        
  <div class="row" style="margin-top: 7px;">
  <div class="col-xs-4 pdp-e-i-PAY-l">Pay</div>               
 <div class="col-xs-8 pdp-e-i-PAY-r">                  
 <span>$&nbsp;<span class="payBlkBig" itemprop="price"></span></span>               
 </div>                        
 </div>         
 </div>               
    <div class="row">         
     <form role="form" action="" method="post">          
    <div class="col-sm-6">              
     <select class="form-control" id="select" name="select" placeholder="Enter Mobile no" required="required">   
    <option value="">----Select Color----</option>   
    <option value="1">Green</option>   
   <option value="2">Blue</option>   
   <option value="3">Orange</option>
     </select></div> 
      <div class="col-sm-6">   
     <select class="form-control" id="select" name="select" placeholder="Enter Mobile no" required="required">   
  <option value="">----Select Size----</option>   
  <option value="1">7</option>   
 <option value="2">8</option>   
  <option value="3">9</option></select> </div>                            
    <div class="clear"></div><br>                 
    <p class="loca-para" style="margin-top:15px;">Expect Delivery In 1 -  Days</p><br>                   
    <center> <button style="margin-top:10px;margin-right:15px;padding: 10px 50px;" type="submit" class="btn btn-lg btn-info">              
Add To Cart</button> </center>                
      </form>         
      </div>                                       
     </div>                                       
    <br>                      
   <br><br>                                                        
       </div>                              
  </div>            
   </div>                    
   </div>     
      </div>  
   </div>    

      <script>
       function flexsliderStart() {
       $('.flexslider').flexslider({
      animation: "slide",
      controlNav: "thumbnails"
      });
     }
    </script>

When I click the quick view button to trigger the modal to show, the first image is displayed together with the image list but when I click the slider images, the slider doesn't move or work , but I click the inspect element to see if the images are loaded, its wrking.

from Newest questions tagged laravel-5 - Stack Overflow http://ift.tt/24cLfYW
via IFTTT