Flexslider Carousel do not display images on slider

Question

Flexslider Carousel do not display images on slider but when I inspect in browser it display images.

HTML Code

<div class="flexslider">
  <ul class="slides">
    <li>
      <img src="http://flexslider.woothemes.com/images/kitchen_adventurer_cheesecake_brownie.jpg" />
    </li>
    <li>
      <img src="http://flexslider.woothemes.com/images/kitchen_adventurer_lemon.jpg" />
    </li>
    <li>
      <img src="http://flexslider.woothemes.com/images/kitchen_adventurer_caramel.jpg" />
    </li>
    <li>
      <img src="http://flexslider.woothemes.com/images/kitchen_adventurer_lemon.jpg" />
    </li>
  </ul>
</div>

jQuery Code

$(window).load(function() {
  $('.flexslider').flexslider({
    animation: "slide"
  }); 
});

JS Fiddle

There is an error in the console, at least on your `jsFiddle`: _Resource interpreted as Script but transferred with MIME type text/plain: "http://flexslider.woothemes.com/js/modernizr.js"._ — emerson.marini, Dec 29 '14 at 10:11
Also you're not loading the `flexslider` script, just its stylesheet. — emerson.marini, Dec 29 '14 at 10:14
Just by adding the `flexslider` library script, it started to work like magic? http://jsfiddle.net/MelanciaUK/xf5tg469/2/ — emerson.marini, Dec 29 '14 at 10:17
How were you expecting it to work without the library itself? — emerson.marini, Dec 29 '14 at 10:18

score 2 · Answer 1 · answered Dec 29 '14 at 10:10

2

Add this css and try again

.flexslider .slides > li{
    display:block;
}

answered Dec 29 '14 at 10:10

rut2

706
1
9
29

This fixed my problem. Thanks. – unity100 Sep 19 '17 at 18:29

score 0 · Accepted Answer · edited Jun 20 '20 at 09:12

0

Sorry! I forgot to import jquery.flexslider.js library and I resolve my problem to adding this library and it working fine for me.

JS Fiddle

edited Jun 20 '20 at 09:12

Community

1
1

answered Dec 29 '14 at 10:32

Sadikhasan

18,365
21
80
122

Flexslider Carousel do not display images on slider

2 Answers2