-2

I am trying to put an image and some text next to each other with 2 col-md-6 with flexslider. But for some reason the images are not being shown 

<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>

I don't do any css that could change the behaviour of the image I only select other html elements

Rory McCrossan
  • 331,213
  • 40
  • 305
  • 339
Chris
  • 2,131
  • 2
  • 16
  • 24

1 Answers1

0

Please check this. I think you forget to put 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>
ankita patel
  • 4,201
  • 1
  • 13
  • 28