Question

我正在努力让Unslider工作 - 现在它是一个彼此重叠的图像列表..

HTML：

<div id="main">
<div class="slider">
    <ul>
        <li><img src="images/slider1.jpg" /></li>
        <li><img src="images/slider2.jpg" /></li>
        <li><img src="images/slider3.jpg" /></li>
    </ul>
</div>
</div>

CSS：

main {max-width:900px;
           margin-left:auto;
           margin-right:auto;}

.slider { position: relative; overflow: auto; width:900px;}
        .slider li { list-style: none; }
            .slider ul li { float: left; }

ul {padding: 0;
    margin: 0;}

Answer 1

我认为这可能是ul的默认浏览器样式的一个问题。请参阅我的示例here，取消注释ul样式以查看修复。

也可以使用CSS Reset

修复此问题

Answer 2

试试这个：

$(document).ready(function() {
    $( ".slider img:first" ).load(function() {
        $('.slider').unslider({
            speed: 700,              
            delay: 5000,         
            complete: function() {}, 
            keys: true,              
            dots: false, 
            fluid: false,      
        });
    });
});

http://jsfiddle.net/trevordowdle/Zq8vm/14/

滑块和溢出问题

2 个答案: