2017-10-10 8 views
-2

flexsliderで2 col-md-6で画像とテキストを並べて表示しようとしています。しかし、私は画像の振る舞いを変えることができる任意のCSSをしないイメージがFlexsliderで画像が表示されない

<div class="flexslider"> 
    <ul class="slides"> 
    <li> 
     <div class="col-md-6"> 
     <div class="avatar"> <img src="http://www.free-css.com/assets/files/free-css-templates/preview/page215/flosix/assets/images/intro-img1.jpg" alt="" class="img-responsive"> </div> 
     </div> 
     <div class="col-md-6"> 
     <blockquote> 
      <h1>We create Innovative Systems</h1> 
      <p>Susan Sims, Interaction Designer at XYZCras mattis consectetur purus sit amet fermentum. Donec sed odio dui. Aenean lacinia bibendum nulla sed consectetur.Cras mattis consectetur purus sit amet fermentum.Interaction Designer at XYZCras mattis 
      consectetur purus sit amet fermentum. Donec sed odio dui. Aenean lacinia bibendum nulla sed consectetur.Cras mattis consectetur purus sit amet fermentum. </p> 
      <p>Susan Sims, Interaction Designer at XYZCras mattis consectetur purus sit amet fermentum. Donec sed odio dui. Aenean lacinia bibendum nulla sed consectetur.Cras mattis consectetur purus sit amet fermentum. </p> 
     </blockquote> 
     </div> 
    </li> 
    <li> 
     <div class="col-md-6"> 
     <div class="avatar"> <img src="http://www.free-css.com/assets/files/free-css-templates/preview/page215/flosix/assets/images/intro-img2.jpg" alt="" class="img-responsive"> </div> 
     </div> 
     <div class="col-md-6"> 
     <blockquote> 
      <h1>We create Digital Experience</h1> 
      <p>Susan Sims, Interaction Designer at XYZCras mattis consectetur purus sit amet fermentum. Donec sed odio dui. Aenean lacinia bibendum nulla sed consectetur.Cras mattis consectetur purus sit amet fermentum.Interaction Designer at XYZCras mattis 
      consectetur purus sit amet fermentum. Donec sed odio dui. Aenean lacinia bibendum nulla sed consectetur.Cras mattis consectetur purus sit amet fermentum. </p> 
      <p>Susan Sims, Interaction Designer at XYZCras mattis consectetur purus sit amet fermentum. Donec sed odio dui. Aenean lacinia bibendum nulla sed consectetur.Cras mattis consectetur purus sit amet fermentum. </p> 
     </blockquote> 
     </div> 
    </li> 
    </ul> 
</div> 

を示されていない何らかの理由で私は他のHTML要素に

答えて

0

を選択し、これを確認してください。私はあなたがjsを置くことを忘れていると思う。

$(window).load(function() { 
 
    $('.flexslider').flexslider({ 
 
    animation: "slide" 
 
    }); 
 
});
<link href="https://cdnjs.cloudflare.com/ajax/libs/flexslider/2.6.4/flexslider.min.css" rel="stylesheet"/> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/flexslider/2.6.4/jquery.flexslider-min.js"></script> 
 

 

 
<div class="flexslider"> 
 
    <ul class="slides"> 
 
    <li> 
 
     <div class="col-md-6"> 
 
     <div class="avatar"> <img src="http://www.free-css.com/assets/files/free-css-templates/preview/page215/flosix/assets/images/intro-img1.jpg" alt="" class="img-responsive"> </div> 
 
     </div> 
 
     <div class="col-md-6"> 
 
     <blockquote> 
 
      <h1>We create Innovative Systems</h1> 
 
      <p>Susan Sims, Interaction Designer at XYZCras mattis consectetur purus sit amet fermentum. Donec sed odio dui. Aenean lacinia bibendum nulla sed consectetur.Cras mattis consectetur purus sit amet fermentum.Interaction Designer at XYZCras mattis 
 
      consectetur purus sit amet fermentum. Donec sed odio dui. Aenean lacinia bibendum nulla sed consectetur.Cras mattis consectetur purus sit amet fermentum. </p> 
 
      <p>Susan Sims, Interaction Designer at XYZCras mattis consectetur purus sit amet fermentum. Donec sed odio dui. Aenean lacinia bibendum nulla sed consectetur.Cras mattis consectetur purus sit amet fermentum. </p> 
 
     </blockquote> 
 
     </div> 
 
    </li> 
 
    <li> 
 
     <div class="col-md-6"> 
 
     <div class="avatar"> <img src="http://www.free-css.com/assets/files/free-css-templates/preview/page215/flosix/assets/images/intro-img2.jpg" alt="" class="img-responsive"> </div> 
 
     </div> 
 
     <div class="col-md-6"> 
 
     <blockquote> 
 
      <h1>We create Digital Experience</h1> 
 
      <p>Susan Sims, Interaction Designer at XYZCras mattis consectetur purus sit amet fermentum. Donec sed odio dui. Aenean lacinia bibendum nulla sed consectetur.Cras mattis consectetur purus sit amet fermentum.Interaction Designer at XYZCras mattis 
 
      consectetur purus sit amet fermentum. Donec sed odio dui. Aenean lacinia bibendum nulla sed consectetur.Cras mattis consectetur purus sit amet fermentum. </p> 
 
      <p>Susan Sims, Interaction Designer at XYZCras mattis consectetur purus sit amet fermentum. Donec sed odio dui. Aenean lacinia bibendum nulla sed consectetur.Cras mattis consectetur purus sit amet fermentum. </p> 
 
     </blockquote> 
 
     </div> 
 
    </li> 
 
    </ul> 
 
</div>

関連する問題