Question

我试图在jquery中制作一个允许响应式设计的幻灯片。我首先遇到一些问题，因为我使用的是尺寸为1183 * 235的图像，然后图像不会占据整个宽度，现在我正在使用图像1900 * 235，现在占据全宽。但是当我关闭屏幕时，图像不会调整大小。我们需要为使用unslider的响应式设计做一些额外的工作吗？ fluid:true还不够吗？

这是我的代码：http://jsfiddle.net/ritz/T8JdT/1/

我的HTML：

<div class="banner">
    <ul>
        <li style="background-image:url(imagens/image1.png)"><h2>This is a slide.</h2></li>
        <li style="background-image:url(imagens/image1.png)">This is another slide.</li>
        <li style="background-image:url(imagens/image1.png)">This is a final slide.</li>
    </ul>
</div>

</section

我的css：

 #banner-container{width:100%; float:left;}
.banner { position: relative; overflow: auto;}
.banner li { list-style: none; background-repeat:no-repeat; }
.banner ul li { float: left; min-height:250px;}
.banner .dots { bottom: 20px; left: 0; position: absolute; right: 0;
} .banner .dots li { border: 2px solid #fff; border-radius: 6px; cursor: pointer; display: inline-block; height: 10px; margin: 0 4px; opacity: .4; text-indent: -999em; -webkit-transition: background .5s, opacity .5s; -moz-transition: background .5s, opacity .5s; transition: background .5s, opacity .5s; width: 10px; } .banner .dots li.active { background: #fff; opacity: 1; }

我的jQuery：

<script type='text/javascript' src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script type="text/javascript" src="unslider/unslider.min.js"></script>
<script type="text/javascript">
    $(function() {
    $('.banner').unslider({
        dots: true,
        speed: 650,
        delay: 2000,
        fluid: true

    });
});
</script>

Unslider没有表现出响应

0 个答案: