0

サイトにカルーセルを追加しようとしています。利用可能なプラグインを調べたところ、非常にシンプルで軽量な TinyCarousel に出会いました。

私は彼らのコードをプラグインし、セットアップの指示に従いました。いくつかの画像でカルーセルを正常にコンパイルして実行できました。

私が直面しているいくつかの問題：

1)画像のサイズがそれほど小さくならないように、JSまたはCSSを変更するにはどうすればよいですか? #slider1 .viewport クラスで高さと幅を変更しようとしましたが、うまくいきません。

2) 画像を拡大できるようになったら、サイトの他のページへの「詳細」ハイパーリンクをいくつか含む、画像の上に配置される DIV を追加したいと思います。カルーセル内の画像は引き続き回転する必要がありますが、「詳細」DIV は配置されたままになります。

3) NEXTボタンとPREVボタンを画像の上に配置する方法はありますか? このように - http://wowslider.com/slider-jquery-elegant-linear-demo.html ユーザーがカルーセルにカーソルを合わせると、[次へ] ボタンと[前へ]ボタンがフェードインします。

ここで試してみました。以下のjsFiddleを参照してください

HTML コード:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<body>
<section id="welcome">
    <form method="post">
        <div>
            <section>
                <fieldset>
                    <ul>
                        <div id="slider1">  
                            <a class="buttons prev" href="#">left</a>
                            <div class="viewport">
                                <ul class="overview">
                                    <li>
                                        <img src="http://www.freestanding-kitchens.com/data/usr_001_collections/tables___chairs.jpg" />
                                    </li>
                                    <li>
                                        <img src="http://www.pagazzi.com/wp/wp-content/uploads/2012/06/tables-and-chairs1.jpg" />
                                    </li>
                                </ul>
                            </div>
                            <a class="buttons next" href="#">right</a>
                        </div>
                    </ul>
                </fieldset>
            </section>
        </div>
    </form>
</section>
</body>

JS:

$(document).ready(function () {
    $('#slider1').tinycarousel({
       pager: true,
       interval: true
    });
});

ありがとう

更新 次の問題の解決 1

新しい jsFiddle - http://jsfiddle.net/ginarann/JtfDd/15/

4

1 に答える 1