Flexslider does not work with jquery selector

Question

I use Flexislider to move my images.

My HTML code is:

<ul class='slides'> <li class="slide-two" > <div class="flex-div slide-stones2"> <div class="slide-footsteps"> <p> <span class="brown-bg">Take the steps to be who you want to be...</span> </p> </div> <div class="backstretch"> <img src="img/massage-slider/slide-footsteps.jpg"/> </div> </div> </li> <ul> 

I am trying to add a selector as follows:

 $(document).ready(function() { $('.flexslider').flexslider({ selector : ".slides>li>div>div>img", animation : "slide", controlsContainer : ".flex-container" }); }); 

Answer 1

It seems like a problem

has a selector

 selector : ".slides>li>div>div>img", 

supposed to

 selector : ".slides > ul > li > div > div.backstretch > img", 

Answer 2

I checked it on zonemedia.sk

HTML:

  <div class="flexslider"> <ul class="slides"> <li><img src="img" alt="" /></li> <li><img src="img" alt="" /></li> <li><img src="img" alt="" /></li> <li><img src="img" alt="" /></li> </ul> </div><!-- .flexslider --> 

JS:

 $('.flexslider').flexslider({ animation: "slide", controlNav: false, smoothHeight: true, useCss: true, touch: true, before: function(){ $('body').each(function () { var $spy = $(this).scrollspy('refresh'); }); }, start: function(){ $('body').each(function () { var $spy = $(this).scrollspy('refresh'); }); }, added: function(){ $('[data-spy="scroll"]').each(function () { var $spy = $(this).scrollspy('refresh'); }); } }); 

Answer 3

I believe that selector : ".slides>li>div>div" is what you are looking for because there is no slider for 1 image. It should work if you are targeting a containing <div> IE. it should not be <li> . I have not seen the case where the <img> was a target selector.

https://github.com/woothemes/FlexSlider/wiki/FlexSlider-Properties

Answer 4

Hey there are two .slides > li > div in the path .slides > li > div

now you just write .slides > li > div > div > img

which will try to find the image in the first div, so we need to define a div like this

.slides > ul > li > div > .backstretch > img

Answer 5

The HTML that you indicated in your question does not contain the most relevant information: a slide container. In addition, we do not know which slider you are trying to use, since it is not taken into account in the question. I suggest you provide all the necessary information by asking a question so that people can understand what is happening around.

However, I managed to find a working example in this tutorial that works like the one you partially provided and summarizes each step.

First, make sure all scripts are included in the page:

 <link rel="stylesheet" href="flexslider.css" type="text/css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script> <script src="jquery.flexslider.js"></script> 

Then, to make the slider work, you obviously need an accessible container to work with. Say this is .slides_container :

 <div class="slides_container"> <ul class="slides"> <li> <img src="slide1.jpg" /> </li> <li> <img src="slide2.jpg" /> </li> <li> <img src="slide3.jpg" /> </li> </ul> </div> 

Finally, the slider should be activated as follows (in the header):

 $(window).load(function() { $('.slides_container').flexslider(); }); 

As a tip, I suggest you make sure that this basic example works flawlessly before adding any complexity to it. When this works, try using the simplest selector you can think of (i.e. the #temp element #temp that it most likely works as intended without any debugging capability). The final case should be written only when you know that all functions work.

Hope this helps :-)

Answer 6

jQuery (document) .ready (function () {

  $('.flexslider').flexslider({ "image.jpg", "image.jpg", "image.jpg" ], {duration: 3000, fade: 750});