我正在使用 flexslider 来制作我的主页滑块。
我的字幕有问题。当我更改幻灯片时,每张幻灯片的标题都会在幻灯片停止后出现,而不是在从一张幻灯片更改到另一张幻灯片期间出现。
我的CSS代码:
.front-page-slider{
position: relative;
width: 900px;
padding: 0;
margin-top: 28px;
}
.flexslider ul.slides > li{
position: relative;
}
.flex-caption{
position:absolute;
width: 235px;
height: 445px;
z-index: 50;
top: 25px;
right: 25px;
background-color: #CDCDCD;
}
html
<div class="container front-page-slider">
<div class="flexslider">
<div class="flex-viewport" style="overflow: hidden; position: relative;">
<ul class="slides" style="width: 1800%; -webkit-transition: 0s; transition: 0s; -webkit-transform: translate3d(-900px, 0, 0);">
<li class="clone" aria-hidden="true" style="width: 900px; float: left; display: block;">
<a href="#" target="_blank"><img width="300" height="300" src="http://localhost/artech/wp-content/uploads/2013/10/radio-nippon-project.png" class="attachment-front-slider wp-post-image" alt="radio-nippon-project" draggable="false"></a>
<div class="flex-caption"><h1>Radio Rippon</h1></div>
</li>
/* More <li> with slides etc*/
</ul>
</div>
</div>
和js代码
$('.flexslider').flexslider({
animation: "slide",
controlsContainer: ".front-page-slider",
controlNav: false,
slideshow: false
});
另外当我使用这个
top: 25px;
bottom: 0;
left: 0;
仅在正确的方向上工作正常(当我按下下一个箭头时)
我还尝试了各种顶部,左侧,右侧,底部的组合,但没有运气。
在此先感谢并为我的英语感到抱歉。
PS:我只使用 jquery.flexslider-min.js (Flexslider 2) 而不是提供的 css。
更新1:我注意到这只发生在chrome(最新版本)而不是firefox(最新版本)。即使不是在 IE10。