0

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

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

我的滑块目前位于 80% 宽度的包装器中

我想让滑块流畅地改变宽度。我可以更改下 css 中滑块的宽度div.orbit-wrapper和下图像的大小，.orbit img但是当将图像的宽度设置为img百分比时，图像消失，并且在开发人员收费上说它的宽度和高度为 1px –</p> 

<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>
4

0 回答 0