我正在使用 Slidertron lib在我的一个网站上播放幻灯片。但是,当我根据某些分辨率查看它时,我可以在当前幻灯片中看到下一张幻灯片,这是不应该发生的。
CSS:
#slider {margin-left:auto;margin-right:auto;width:100%;position:relative;}
#slider .viewer {width:75%;height:400px;margin:0 auto;overflow:hidden;border:1px solid red;}
#slider .viewer .reel {display:none;height: 375px;}
#slider .slide {border:1px solid blue;}
#slider .viewer .reel .slide {position: relative;width:1100px;height:375px;}
HTML:
<div id="slider">
<div class="indicator">
<span>1</span>
<span>2</span>
<span>3</span>
<span>4</span>
<span>5</span>
</div>
<div class="viewer">
<div class="reel">
<div class="slide">
<img class="title" src="/Content/1.png" alt="" />
<p class="paragraph">Slide 1 text.</p>
<img class="image" src="/Content/2.png" alt="" />
</div>
<div class="slide">
<img class="title" src="/Content/Img1.png" alt="" />
<p class="paragraph">Slide 2 text.</p>
<img class="image" src="/Content/Img2.png" alt="" />
</div>
</div>
</div>
</div>
jQuery(有点不相关,因为它运行良好):
$(function () {
$('#slider').slidertron({
viewerSelector: '.viewer',
reelSelector: '.viewer .reel',
slidesSelector: '.viewer .reel .slide',
indicatorSelector: '.indicator span',
speed: 'slow',
navPreviousSelector: '.previous',
navNextSelector: '.next',
advanceDelay: 40000
});
});
仅供引用,我添加两个边框只是为了查看我的 div 的分隔。
最佳答案
您的 CSS 中的 .viewer
和 .reel
之间有 25 像素的差异!
对我来说,jquery.slidertron 的最佳工作方式是我用 css 严格地告诉他图像大小。
/*slider*/
#slider {
margin: 0 auto;
position: relative;
width: 960px;
height: 300px;
}
#slider .viewer {
width: 960px;
height: 300px;
overflow: hidden;
}
#slider .viewer .reel {
display: none;
width: 960px;
height: 300px;
}
#slider .viewer .reel .slide {
position: relative;
width: 960px;
height: 300px;
}
/*slider*/
关于css - jQuery Slidertron 溢出,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/15360927/