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