クイックスタート

このクイックスタートでは、HTML マークアップおよび jQuery スクリプトを使用して、HTML プロジェクトに Carousel ウィジェットを追加する方法について学びます。

テキストエディタに張り付けます	コードのコピー
<!DOCTYPE HTML> <HTML> <head> </head> <body> </body> </HTML>

依存ファイルへのリンクを HTML ページの <head> タグ内に追加します。最新の依存ファイルについては、「Wijmo CDN」の CDN ファイルを参照してください。

ドロップダウンから参照コードをコピーして head タグ内に貼り付けます

参照	コードのコピー
<!--Theme--> <link href="http://cdn.wijmo.com/themes/aristo/jquery-wijmo.css" rel="stylesheet" type="text/css" /> <!--Wijmo Widgets CSS--> <link href="http://cdn.wijmo.com/jquery.wijmo-pro.all.3.20173.128.min.css" rel="stylesheet" type="text/css" /> <!--RequireJs--> <script type="text/javascript" src="http://cdn.wijmo.com/external/require.js"></script>

次のマークアップを <body> タグ内に追加して、ウィジェットを作成します。<div> 要素はウィジェットを作成し、その id 属性を jQuery で呼び出して初期化します。<ul> 要素は、カルーセルに８つの画像を追加し、それぞれの画像にテキストキャプションを付けます。

ドロップダウンからマークアップをコピーして body タグ内に貼り付けます

マークアップ	コードのコピー
<div id="carousel"> <ul> <li> <img src="Images\sports1.png" alt="Sports 1" /> <span>Word Caption 1</span></li> <li> <img src="Images\sports2.png" alt="Sports 2" /> <span>Word Caption 2</span></li> <li> <img src="Images\sports3.png" alt="Sports 3" /> <span>Word Caption 3</span></li> <li> <img src="Images\sports4.png" alt="Sports 4" /> <span>Word Caption 4</span></li> <li> <img src="Images\sports5.png" alt="Sports 5" /> <span>Word Caption 5</span></li> <li> <img src="Images\sports6.png" alt="Sports 6" /> <span>Word Caption 6</span></li> <li> <img src="Images\sports7.png" alt="Sports 7" /> <span>Word Caption 7</span></li> <li> <img src="Images\sports8.png" alt="Sports 8" /> <span>Word Caption 8</span></li> </ul> </div>

<head> タグ内の参照の下に次のスクリプトを追加して、ウィジェットを初期化し、いくつかのオプションを設定します。

ドロップダウンからスクリプトをコピーして head タグ内に貼り付けます

関連トピック