ComponentOne Studio MVC4 Classic ヘルプ
カルーセルへのアニメーションの適用
MVC Classic ウィジェット > Wijcarousel > カルーセルへのアニメーションの適用

wijcarousel ウィジェットはアニメーションをサポートします。 この機能を利用するには、単に animated オプションを設定します。 Web サイト (http://demo.componentone.com/ASPNET/MVCExplorer/carousel/Animation) にアクセスし、MVC コントロールエクスプローラの Carousel > Animation サンプルのライブデモをご覧ください。.

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

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

  4. 前の手順で追加した </div> 終了タグの後に、以下のマークアップを追加して animated オプションを設定します。
    ソースビュー
    コードのコピー 
    <div><input id="chkQueue" type="checkbox" /></div>
    <div><label for="chkQueue"> Animation Settings: Queue </label></div>
    <div><label for="selEasing">Easing:</label></div><div>
    <select id="selEasing">
        <option value="easeInQuad">easeInQuad</option>
        <option value="easeOutQuad">easeOutQuad</option>
        <option value="easeInOutQuad">easeInOutQuad</option>
        <option value="easeInCubic">easeInCubic</option>
        <option value="easeOutCubic">easeOutCubic</option>
        <option value="easeInOutCubic">easeInOutCubic</option>
        <option value="easeInQuart">easeInQuart</option>
        <option value="easeOutQuart">easeOutQuart</option>
        <option value="easeInOutQuart">easeInOutQuart</option>
        <option value="easeInQuint">easeInQuint</option>
        <option value="easeOutQuint">easeOutQuint</option>
        <option value="easeInOutQuint">easeInOutQuint</option>
        <option value="easeInSine">easeInSine</option>
        <option value="easeOutSine">easeOutSine</option>
        <option value="easeInOutSine">easeInOutSine</option>
        <option value="easeInExpo">easeInExpo</option>
        <option value="easeOutExpo">easeOutExpo</option>
        <option value="easeInOutExpo">easeInOutExpo</option>
        <option value="easeInCirc">easeInCirc</option>
        <option value="easeOutCirc">easeOutCirc</option>
        <option value="easeInOutCirc">easeInOutCirc</option>
        <option value="easeInElastic">easeInElastic</option>
        <option value="easeOutElastic">easeOutElastic</option>
        <option value="easeInOutElastic">easeInOutElastic</option>
        <option value="easeInBack">easeInBack</option>
        <option value="easeOutBack">easeOutBack</option>
        <option value="easeInOutBack">easeInOutBack</option>
        <option value="easeInBounce">easeInBounce</option>
        <option value="easeOutBounce">easeOutBounce</option>
    </select></div>
    <div><input type="button" value="適用" onclick="changeProperties()" /></div>
</div>

    </div>

    これにより wijcarousel のアニメーションをカスタマイズする要素が追加されます。 実行時に、イージングスタイルを選択できます。〈適用〉ボタンをクリックして選択したスタイルを適用します。 スタイルを適用すると、〈Previous〉または〈Next〉ボタンを使用して画像をナビゲートし、選択したアニメーションを表示できます。

  5. 前の手順で追加した </div> 終了タグの後に、以下のマークアップを追加してスタイルのオプションを設定します。
    ソースビュー
    コードのコピー 
    <style type="text/css">
    #wijcarousel0
    {
        width:750px;
        height:300px;
    }
</style>

    これにより wijcarousel ウィジェットのサイズが設定されます。

  6. 前の手順で追加した </style> 終了タグの後に、以下の jQuery スクリプトを追加して wijcarousel ウィジェットを初期化します。
    ソースビュー
    コードのコピー 
    <script id="scriptInit" type="text/javascript">
  $(document).ready(function () {
      $("#wijcarousel0").wijcarousel({
    display: 1,
    showTimer: false
      });
  });
  function changeProperties() {
      var animationOptions = {
    queue: $('#chkQueue').val(),
    easing: $('#selEasing').val()
      };
      $('#wijcarousel0').wijcarousel({
    animation: animationOptions
      });
  }
</script>

    これによりカルーセルが初期化され、アニメーションが追加されます。

このトピックの作業結果

[F5] を押してアプリケーションを実行し、チェックボックスを ON にしてイージングスタイルを選択し、〈適用〉ボタンをクリックして選択したスタイルを適用します。スタイルを適用すると、〈Previous〉または〈Next〉ボタンを使用して画像をナビゲートし、選択したアニメーションを表示できます。

関連トピック
カルーセルの向きの設定

 

 

Copyright © GrapeCity inc. All rights reserved.