Flex滑块不工作，除非使用javascript单击检查

Question

这是我的代码

       <div class="modal fade" id="{{$catg->product_id}}" tabindex="-1" role="dialog" aria-labelledby="{{$catg->product_id}}" 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">{{$catg->product_title}}</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="{{ url('assets/productimage/').'/'.$x}}">
            <div class="thumb-image"> 
            <img src="{{ url('assets/productimage/').'/'.$x}}" 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">{{$catg->product_title}}</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">{{$catg->product_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 - {{$catg->product_days}} 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>

当我单击快速查看按钮以触发要显示的模式时，第一个图像与图像列表一起显示但是当我单击滑块图像时，滑块不会移动或工作，但是我单击了inspect元素为了查看图像是否已加载，请查看图像。