ComponentOne Studio MVC5 Classic ヘルプ
カルーセルの向きの設定
MVC Classic ウィジェット > Wijcarousel > カルーセルの向きの設定

wijcarousel ウィジェットでは、ユーザーは水平または垂直方向の向きを設定できます。 この機能を利用するには、単に orientation オプションを設定します。 例については、Web サイト ( http://demo.componentone.com/ASPNET/MVCExplorer/carousel/Orientation) にアクセスし、MVC コントロールエクスプローラの Carousel > Orientation サンプルのライブデモをご覧ください。

拡張方向を設定するには、以下の手順を実行します。

  1. ASP.NET MVC 5 Wijmo アプリケーション を作成します。
  2. ソリューションエクスプローラに移動して、Views フォルダ内の Shared フォルダを展開し、_Layout をダブルクリックしてファイルを開きます。
  3. 依存関係をチェックして、プロジェクトが Wijmo の最新バージョンを参照していることを確認します。 これらはページの <head> タグ内に配置されている必要があります。 Wijmo の最新バージョンの依存関係は http://wijmo.c1.grapecity.com/download/#wijmo-cdn で確認できます。
  4. 以下のマークアップを、@RenderBody() のすぐ後のページの <body> タグ内に追加します。
    ソースビュー
    コードのコピー 
    <div id="wijcarousel0">
    <ul>
    <li>
      <img alt="1" src="http://lorempixum.com/200/150/sports/1" title="Word" /><span>キャプション 1</span></li>
    <li>
      <img alt="2" src="http://lorempixum.com/200/150/sports/2" title="Word2" /><span>キャプション 2</span></li>
    <li>
      <img alt="3" src="http://lorempixum.com/200/150/sports/3" title="Word3" /><span>キャプション 3</span></li>
    <li>
      <img alt="4" src="http://lorempixum.com/200/150/sports/4" title="Word4" /><span>キャプション 4</span></li>
    <li>
      <img alt="5" src="http://lorempixum.com/200/150/sports/5" title="Word5" /><span>キャプション 5</span></li>
    <li>
      <img alt="6" src="http://lorempixum.com/200/150/sports/6" title="Word6" /><span>キャプション 6</span></li>
    <li>
      <img alt="7" src="http://lorempixum.com/200/150/sports/7" title="Word7" /><span>キャプション 7</span></li>
    <li>
      <img alt="8" src="http://lorempixum.com/200/150/sports/8" title="Word8" /><span>キャプション 8</span></li>
    <li>
      <img alt="9" src="http://lorempixum.com/200/150/sports/9" title="Word9" /><span>キャプション 9</span></li>
    <li>
      <img alt="10" src="http://lorempixum.com/200/150/sports/10" title="Word10" /><span>キャプション 10</span></li>
    </ul>
    </div>
    <div id="wijcarousel1">
    <ul>
    <li>
      <img alt="1" src="http://lorempixum.com/200/150/abstract/1" title="Word" /><span>キャプション 1</span></li>
    <li>
      <img alt="2" src="http://lorempixum.com/200/150/abstract/2" title="Word2" /><span>キャプション 2</span></li>
    <li>
      <img alt="3" src="http://lorempixum.com/200/150/abstract/3" title="Word3" /><span>キャプション 3</span></li>
    <li>
      <img alt="4" src="http://lorempixum.com/200/150/abstract/4" title="Word4" /><span>キャプション 4</span></li>
    <li>
      <img alt="5" src="http://lorempixum.com/200/150/abstract/5" title="Word5" /><span>キャプション 5</span></li>
    <li>
      <img alt="6" src="http://lorempixum.com/200/150/abstract/6" title="Word6" /><span>キャプション 6</span></li>
    <li>
      <img alt="7" src="http://lorempixum.com/200/150/abstract/7" title="Word7" /><span>キャプション 7</span></li>
    <li>
      <img alt="8" src="http://lorempixum.com/200/150/abstract/8" title="Word8" /><span>キャプション 8</span></li>
    <li>
      <img alt="9" src="http://lorempixum.com/200/150/abstract/9" title="Word9" /><span>キャプション 9</span></li>
    <li>
      <img alt="10" src="http://lorempixum.com/200/150/abstract/10" title="Word10" /><span>キャプション 10</span></li>
    </ul>
</div>

    このマークアップは、２つのカルーセルウィジェットのコンテンツをページに追加します。 次の手順では、カルーセルの向きを設定します。

  5. 前の手順で追加した </div> 終了タグの後に、以下の jQuery スクリプトを入力して wijcarousel ウィジェットを初期化し、orientation オプションを設定します。
    ソースビュー
    コードのコピー 
    <script id="scriptInit" type="text/javascript">
   $(document).ready(function () {
     $("#wijcarousel0").wijcarousel({
     display: 3,
     step: 2,
     orientation: "horizontal"
     });     $("#wijcarousel1").wijcarousel({
     display: 3,
     step: 2,
     orientation: "vertical"
     });
   });
</script>
<style type="text/css">
  #wijcarousel0
  {
    width: 390px;
    height: 90px;
    margin-bottom: 1em;
  }    #wijcarousel1
  {
    width: 120px;
    height: 300px;
    margin-bottom: 1em;
  }
</style>

    １つのカルーセルが縦向きに表示され、もう１つのカルーセルが横向きに表示されます（デフォルト）。

このトピックの作業結果

[F5] を押してアプリケーションを実行し、１つのカルーセルが縦向きに表示され、もう１つのカルーセルが横向きに表示されることを確認します。

 

 

Copyright © GrapeCity inc. All rights reserved.