FlexSlider fades but will not slide?

Question

I am currently trying to add a slider to a website and came across one which gets good feedback (including here on StackOverflow) called FlexSlider - http://flex.madebymufffin.com/. Essentially there are two functions that are supposedly ready to go out of the box. One where images just replace one another after a set period of time, the second one uses a slide animation as the transition.

I currently have 3 images with captions:

  <div class="flexslider">
    <ul class="slides">
  <li>
    <a href="http://...."><img src="../images/C.....jpg" />
     <p class="flex-caption"><b>.text1..</b></p></a>
    </li>
    <li>
    <a href="http://...."><img src="../images/C.....jpg" />
     <p class="flex-caption"><b>.text2..</b></p></a>
    </li><li>
    <a href="http://...."><img src="../images/C.....jpg" />
     <p class="flex-caption"><b>.text3..</b></p></a>
    </li>
  </ul>
  </div>

This works perfectly for the first function, each image appears with the matching caption. However, when I try to use the slide animation I run into problems. As described in the instructions with the slider, I add in a <div class="flex-container"> around the above code. I also change the call function within the page to (as instructed to within their notes):

 <script type="text/javascript">
  $(window).load(function() {
    $('.flexslider').flexslider({
      animation: "slide",
      controlsContainer: ".flex-container"
    });
  });
</script> 

However, although the images behave correctly, ALL of the captions are visible all the time and they do not move at all... Presumably thus is something to do with there being an error in how the div elements have been defined, but I am struggling to work out why? Has anyone else experienced similar problems with this slider or do you have any suggestions?

The corresponding css is:

/* Browser Resets */
.flex-container a:active,
.flexslider a:active {outline: none;}
.slides,
.flex-control-nav,
.flex-direction-nav {margin: 0; padding: 0; list-style: none;} 

/* FlexSlider Necessary Styles
*********************************/ 
.flexslider {width: 700px; margin: 0; padding: 0;}
.flexslider .slides > li {display: none;} /* Hide the slides before the JS is loaded. Avoids image jumping */
.flexslider .slides img {max-width: 100%; display: block;}
.flex-pauseplay span {text-transform: capitalize;}

/* Clearfix for the .slides element */
.slides:after {content: "."; display: block; clear: both; visibility: hidden; line-height: 0; height: 0;} 
html[xmlns] .slides {display: block;} 
* html .slides {height: 1%;}

/* No JavaScript Fallback */
/* If you are not using another script, such as Modernizr, make sure you
 * include js that eliminates this class on page load */
.no-js .slides > li:first-child {display: block;}


/* FlexSlider Default Theme
*********************************/
.flexslider {background: #fff; border: 4px solid #fff; position: relative; -webkit-border-radius: 5px;   moz-border-radius: 5px; -o-border-radius: 5px; border-radius: 5px; zoom: 1;}
.flexslider .slides {zoom: 1;}
.flexslider .slides > li {position: center;}
/* Suggested container for "Slide" animation setups. Can replace this with your own, if you wish */
.flex-container {width:800px; zoom: 1; position: relative;}

/* Caption style */
/* IE rgba() hack */
.flex-caption {background:none;   -ms-filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#4C000000,endColorstr=#4C000000);
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#4C000000,endColorstr=#4C000000); zoom: 1;}
.flex-caption {margin: 0; width: 96%; padding: 2%; position: absolute; left: 0; bottom: 0; background: rgba(0,0,0,.3); color: #fff; text-shadow: 0 -1px 0 rgba(0,0,0,.3); font-size: 14px; line-height: 18px;}

/* Direction Nav */
.flex-direction-nav li a {width: 52px; height: 52px; margin: -13px 0 0; display: block; background: url(../images/bg_direction_nav.png) no-repeat 0 0; position: absolute; top: 50%; cursor: pointer; text-indent: -9999px;}
.flex-direction-nav li .next {background-position: -52px 0; right: -21px;}
.flex-direction-nav li .prev {left: -20px;}
.flex-direction-nav li .disabled {opacity: .3; filter:alpha(opacity=30); cursor: default;}

/* Control Nav */
.flex-control-nav {width: 100%; position: absolute; bottom: -30px; text-align: center;}
.flex-control-nav li {margin: 0 0 0 5px; display: inline-block; zoom: 1; *display: inline;}
.flex-control-nav li:first-child {margin: 0;}
.flex-control-nav li a {width: 13px; height: 13px; display: block; background: url(../images/bg_control_nav.png) no-repeat 0 0; cursor: pointer; text-indent: -9999px;}
.flex-control-nav li a:hover {background-position: 0 -13px;}
.flex-control-nav li a.active {background-position: 0 -26px; cursor: default;}

Many thanks in advance for your help with this

Answer 1

Your li elements need position relative. The captions are positioned absolutely, and the relative container in your setup is the .flexslider element. I'll patch an update for this soon.