FlexSlider渐变，但不会滑动？ [英] FlexSlider fades but will not slide?

问题描述

我目前正在尝试添加一个滑块到一个网站，遇到一个获得良好的反馈（包括在这里StackOverflow）称为FlexSlider - http://flex.madebymufffin.com/ 。基本上有两个功能，据说准备开箱。

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.

我目前有3张带有字幕的图片：

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>

这适用于第一个函数，每个图像都显示匹配的标题。
但是，当我尝试使用幻灯片动画我遇到了问题。如滑块的说明中所述，我在上面的代码中添加了< div class =flex-container> 。我还将页面中的调用函数更改为（按照其注释中的说明）：

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> 

但是，虽然图片行为正确，但所有字幕都是可见的，移动所有...可能因此是有关的一个错误，如何定义div元素，但我正在努力找出为什么？有没有其他人遇到类似的问题与这个滑块，或者你有任何建议吗？

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?

对应的css是：

/* 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;}

非常感谢您的帮助

推荐答案

您的li元素需要位置相对。字幕绝对定位，您的设置中的相对容器是.flexslider元素。我很快就会修补此更新。

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.

这篇关于FlexSlider渐变，但不会滑动？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！