1

私は練習サイトを作っていますが、これまで画像カルーセルを作成したことがなかったので、運試しをすることにしました。いくつかのグーグル検索の後、カルーセルを作成するための非常に便利なツールであると思われる Owl Carousel を見つけました。しかし、インストールに関しては、説明書がまったく理解できません。

これまでに行ったことは次のとおりです。

  1. Owl Carousel をダウンロードし、'assets' フォルダーと 'owl-carousel' フォルダーをルート ディレクトリに移動しました。

  2. これをすべて head タグに含めました。

    <meta charset="utf-8">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="style.css">
<link rel="stylesheet" type="text/css" href="flexbox.css">
<link rel="stylesheet" href="owl-carousel/owl.carousel.css">
<link rel="stylesheet" href="owl-carousel/owl.theme.css">
<script src="assets/owl-carousel/owl.carousel.js"></script>

  3. HTML を次のようにセットアップします。

    <div id="owl-example" class="owl-carousel">
    <div class="img1"> Your Content </div>
    <div class="img2"> Your Content </div>
    <div class="img3"> Your Content </div>
</div>

  4. これをCSSに追加しました：

    #owl-demo .item img{
display: block;
width: 100%;
height: auto;
}

  5. 最後に、このスクリプトを有効にしました。

        <script>
    $(document).ready(function() {

    $("#owl-demo").owlCarousel({

        navigation : true, // Show next and prev buttons
        slideSpeed : 300,
        paginationSpeed : 400,
        singleItem:true

        // "singleItem:true" is a shortcut for:
        // items : 1, 
        // itemsDesktop : false,
        // itemsDesktopSmall : false,
        // itemsTablet: false,
        // itemsMobile : false
    });
    </script>

私はこの結果を達成しようとしています:

http://owlgraphic.com/owlcarousel/demos/one.html

Jfiddle のすべてのコードを次に示します。

http://jsfiddle.net/pd19q8vc/

これは私の Web サイトの外観とはまったく異なりますが、必要な場合に備えてコードの全量を利用できるようにしたかっただけです。

それで、私は何を間違っていますか？このカルーセルを機能させるにはどうすればよいですか?

4

2 に答える 2

3 
    <script>
    $(document).ready(function() {

    $("#owl-demo").owlCarousel({

        navigation : true, // Show next and prev buttons
        slideSpeed : 300,
        paginationSpeed : 400,
        singleItem:true

        // "singleItem:true" is a shortcut for:
        // items : 1, 
        // itemsDesktop : false,
        // itemsDesktopSmall : false,
        // itemsTablet: false,
        // itemsMobile : false
    });
});
</script>

追加してください}); script タグが閉じられる前

于 2014-08-29T09:58:41.293 に答える