FlexSlider 褪色但不会滑动?

2022-01-24 00:00:00 slider css

我目前正在尝试向网站添加一个滑块，并遇到了一个获得良好反馈的滑块(包括 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;}

非常感谢您在此方面的帮助

Many thanks in advance for your help with this

推荐答案

你的 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.

相关文章