4

I am using Flexislider to slide 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 selector like this :

$(document).ready(function() {
                $('.flexslider').flexslider({
                    selector : ".slides>li>div>div>img",
                    animation : "slide",
                    controlsContainer : ".flex-container"
                });
            });
Tushar Ahirrao
  • 12,669
  • 17
  • 64
  • 96
  • 5
    I don't see a `.flexslider` class anywhere in your HTML? – dsgriffin May 22 '13 at 20:02
  • 3
    In the code you have posted, you forget to close ul tag ( not
      ). As Zenith pointed it, we cannot see .flexslider element in your code. BTW, do you want to use a flexslider for one image? I don't think so, but, who knows?! So, please consider to post relevant code not pseudo snippet this will help other users to focus on your issue.
     – A. Wolff May 25 '13 at 10:03
  • Can you post the entire code that you have been working with – Sushanth -- May 31 '13 at 18:39

6 Answers6

2

Looks like this is the issue

is with the selector

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

supposed to be 

selector : ".slides > ul > li > div > div.backstretch > img",
Sushanth --
  • 55,259
  • 9
  • 66
  • 105
0

I believe selector : ".slides>li>div>div" is what you are looking for since there is no use of a slider for 1 image. It should work if you target the containing <div> IE. it does not need to be an <li>. I haven't seen a case where an <img> tag was the target selector.

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

Francis Kim
  • 4,235
  • 4
  • 36
  • 51
0

hey there are two div's in path .slides > li > div

now you are just writing .slides > li > div > div > img

which will try to find the image in first div so we have to define the div like this

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

Rohit Agrawal
  • 5,372
  • 5
  • 19
  • 30
0

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');
            });
        }
      });
michalzuber
  • 5,079
  • 2
  • 28
  • 29
0

The HTML you provided in your question does not contain the most relevant information : the slides container. Also, we have no idea which slider you are trying to use since it's not specfied in the question. I suggest that you provide all the relevant information when asking a question so people can understand what's going on around it.

However, I managed to find a working example on this tutorial that works like the one you partially provided and will summarize every steps.

First, make sure that every scripts have been 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 get the slider to work, you obviously need an accessible container to work with. Let say it 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 needs to be activated like this (in the header):

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

As an advice, I suggest that you make sure that this basic example works flawlessly before adding any complexity to it. When it works as well, try with the easiest selector you can think of (ie: an element #temp so it is more likely to work as intended without any chance of debugging). The final case should be written only when you do know that every features are working.

I hope this helps :-)

Frederik.L
  • 5,522
  • 2
  • 29
  • 41
0

jQuery(document).ready(function() {

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