CSS FlexSlider 淡出但不会滑动？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/8691711/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
FlexSlider fades but will not slide?
提问by Texas
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.
我目前正在尝试向网站添加一个滑块，并遇到了一个获得良好反馈（包括 StackOverflow 上的此处）的滑块，称为 FlexSlider - http://flex.madebymufffin.com/。从本质上讲，有两个功能可以开箱即用。一种是图像在一段时间后相互替换，另一种是使用幻灯片动画作为过渡。
I currently have 3 images with captions:
我目前有 3 张带标题的图像：
<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):
这对于第一个功能非常有效，每个图像都带有匹配的标题。但是，当我尝试使用幻灯片动画时，我遇到了问题。如滑块说明中所述，我在<div class="flex-container">上面的代码周围添加了一个。我还将页面中的调用函数更改为（按照他们注释中的指示）：
<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?
然而，虽然图像行为正确，但所有的标题都是可见的，它们根本不移动......大概这与定义 div 元素的方式存在错误有关，但我是努力解决为什么？有没有其他人遇到过与此滑块类似的问题，或者您有什么建议？
The corresponding css is:
对应的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;}
Many thanks in advance for your help with this
非常感谢您对此的帮助
回答by Tyler Smith
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.
您的 li 元素需要相对位置。标题是绝对定位的，设置中的相对容器是 .flexslider 元素。我会尽快为此修补更新。
