Question

我正在使用Orbit滑块http://www.zurb.com/playground/orbit-jquery-image-slider插件，这似乎是一个非常好的滑块。但不幸的是，我不能使滑块灵活的自适应设计，我已经尝试了几乎所有它不起作用。

在这里下载http://matt.zurb.s3.amazonaws.com/orbit-1.2.3.zip

我的滑块目前是80％宽度的包装

我想让滑块更换流畅。我可以在div.orbit-wrapper下的css中更改滑块的宽度，在.orbit img下更改图像的大小，但在将img的宽度设置为百分比时，图像会消失，并在开发人员身上通行费表示它的宽度和高度为1px -

<body>

<div id="top_bar"><p>i am a fixed top bar</p></div>
<div id="wrapper">

    <div id="header">
        <img src="logo.png" width="400" height="100">
    </div>

    <div id="nav">
        <a href=""><p>Home</p><p>Get Started</p></a>
        <a href=""><p>About</p><p>What We Do</p></a>
        <a href=""><p>Gallery</p><p>Veiw our Work</p></a>
        <a href=""><p>Products</p><p>Browse</p></a>
        <a href=""><p>Contact</p><p>Get in Touch</p></a>
    </div>

    <div id="slider">
        <div id="featured"> 
            <img src="overflow.jpg" alt="Overflow: Hidden No More" />
            <img src="pb.png"  alt="HTML Captions" data-caption="#htmlCaption" />
            <img src="features.jpg" alt="and more features" />
        </div>
<!-- Captions for Orbit -->
        <span class="orbit-caption" id="htmlCaption">This is a caption</span>

    </div>
</div>

<script type="text/javascript">
    $(window).load(function() {
        $('#featured').orbit();
     });
</script>


</body>
</html>

如何设置滑块插件以具有灵活的宽度

0 个答案: