ComponentOne Studio MVC4 Classic ヘルプ
カルーセルのページャスタイルの設定
MVC Classic ウィジェット > Wijcarousel > カルーセルのページャスタイルの設定

wijcarousel ウィジェットのページャスタイルを変更できます。 この機能を利用するには、単に pagerType オプションと pagerPosition オプションを設定します。 例については、Web サイト (http://demo.componentone.com/ASPNET/MVCExplorer/carousel/Paging) にアクセスし、MVC コントロールエクスプローラの Carousel > Paging サンプルのライブデモをご覧ください。

ページャタイプを設定するには、以下の手順を実行します。

  1. ASP.NET MVC 4 Wijmo アプリケーション を作成します。
  2. ソリューションエクスプローラに移動して、Views フォルダ内の Shared フォルダを展開し、_Layout をダブルクリックしてファイルを開きます。
  3. 以下のマークアップを、@RenderBody() のすぐ後のページの <body> タグ内に追加します。
    ソースビュー
    コードのコピー 
    <h3>数字</h3>
<br />
<div id="wijcarousel0">
    <ul class="">
        <li class=""><img alt="1" src="http://lorempixum.com/750/300/sports/1" title="Word" /><span>キャプション 1</span></li>
        <li class=""><img alt="2" src="http://lorempixum.com/750/300/sports/2" title="Word2" /><span>キャプション 2</span></li>
        <li class=""><img alt="3" src="http://lorempixum.com/750/300/sports/3" title="Word3" /><span>キャプション 3</span></li>
        <li class=""><img alt="4" src="http://lorempixum.com/750/300/sports/4" title="Word4" /><span>キャプション 4</span></li>
        <li class=""><img alt="5" src="http://lorempixum.com/750/300/sports/5" title="Word5" /><span>キャプション 5</span></li>
    </ul>
</div>
<br />
<h3>ドット</h3>
<br />
<div id="wijcarousel1" class="">
<ul class="">
    <li class=""><img alt="1" src="http://lorempixum.com/750/300/city/1" title="Word" /><span>キャプション 1</span></li>
    <li class=""><img alt="2" src="http://lorempixum.com/750/300/city/2" title="Word2" /><span>キャプション 2</span></li>
    <li class=""><img alt="3" src="http://lorempixum.com/750/300/city/3" title="Word3" /><span>キャプション 3</span></li>
    <li class=""><img alt="4" src="http://lorempixum.com/750/300/city/4" title="Word4" /><span>キャプション 4</span></li>
    <li class=""><img alt="5" src="http://lorempixum.com/750/300/city/5" title="Word5" /><span>キャプション 5</span></li>
</ul>
</div>
<br />
<h3>スライダー</h3>
<br />
<div id="wijcarousel2" class="">
<ul class="">
    <li class=""><img alt="1" src="http://lorempixum.com/750/300/abstract/1" title="Word" /><span>キャプション 1</span></li>
    <li class=""><img alt="2" src="http://lorempixum.com/750/300/abstract/2" title="Word2" /><span>キャプション 2</span></li>
    <li class=""><img alt="3" src="http://lorempixum.com/750/300/abstract/3" title="Word3" /><span>キャプション 3</span></li>
    <li class=""><img alt="4" src="http://lorempixum.com/750/300/abstract/4" title="Word4" /><span>キャプション 4</span></li>
    <li class=""><img alt="5" src="http://lorempixum.com/750/300/abstract/5" title="Word5" /><span>キャプション 5</span></li>
</ul>
</div>

    このマークアップは、３つのカルーセルウィジェットのコンテンツをページに追加します。

  4. 前の手順で追加した </div> 終了タグの後に、以下の jQuery スクリプトを入力して wijcarousel ウィジェットを初期化します。
    ソースビュー
    コードのコピー 
    <script id="scriptInit" type="text/javascript">
    $(document).ready(function () {
    var options = {
    display: 1,
    showTimer: false,
    showPager: true,
    buttonOffset: 16,
    pagerType: "numbers"
    };
    $("#wijcarousel0").wijcarousel(options);
    $("#wijcarousel1").wijcarousel($.extend(options, {
    pagerType: "dots",
    pagerPosition: {
        my: "center top",
        at: "center bottom",
        offset: "0 5"
    },
    start: 2
    }));
    $("#wijcarousel2").wijcarousel($.extend(options, {
    pagerType: "slider",

        loop: false,
    pagerPosition: {
        my: "center top",
        at: "center bottom"
    },
    start: 3
    }));
    });
</script>
<style type="text/css">
    #wijcarousel0, #wijcarousel1, #wijcarousel2
    {
    width: 750px;
    height: 300px;
    }
</style>

    ３つのカルーセルのそれぞれが異なるページャスタイルを使用します。

このトピックの作業結果

[F5] を押してアプリケーションを実行し、３つのカルーセルのそれぞれが numbers、dots、および slider の異なるページャスタイルを使用していることを確認します。

関連トピック
カルーセルへのビデオコンテンツの取り込み

 

 

Copyright © GrapeCity inc. All rights reserved.