手順 2：ウィジェットの初期化

前の手順では、マークアップを追加し、カルーセルに表示するコンテンツを追加しました。この手順では、ウィジェットを初期化するために必要な jQuery スクリプトを追加します。

以下の手順を実行します。

前の手順で追加した </div> 終了タグの後に、以下の jQuery スクリプトを入力して wijcarousel ウィジェットを初期化します。

ソースビュー	コードのコピー
<script id="scriptInit" type="text/javascript"> $(document).ready(function () { $("#wijcarousel0").wijcarousel( { display: 1, showTimer: true, showPager: true, loop: true, pagerType: "dots", showContorlsOnHover: false } ); }); </script>

ソースビュー

コードのコピー

<script id="scriptInit" type="text/javascript">
    $(document).ready(function () {
        $("#wijcarousel0").wijcarousel(
        {
            display: 1,
            showTimer: true,
            showPager: true,
            loop: true,
            pagerType: "dots",
            showContorlsOnHover: false
        }
        );
    });
</script>

このスクリプトはウィジェットを初期化します。

前の手順で追加した終了の </script> タグの後に、以下のマークアップを追加して、wijcarousel ウィジェットをスタイリングします。

ソースビュー	コードのコピー
<style type="text/css"> #wijcarousel0 { width: 750px; height: 300px; } </style>

このマークアップはウィジェットをスタイリングします。

アプリケーションを作成して、wijcarousel ウィジェットを追加して初期化しました。次の手順「手順 3：プロジェクトの実行」では、ウィジェットの実行時のインタラクティブ操作を表示します。