Add Animation

The wijcarousel widget supports animation. Simply set the animated option to take advantage of this feature. See the Carousel > Animation sample of the MVC Control Explorer live demo at http://demo.componentone.com/ASPNET/MVCExplorer/carousel/Animation.

Create an ASP.NET MVC Wijmo application.
Navigate to the Solution Explorer, expand the Shared folder inside the Views folder, and double-click _Layout to open the file.

Add the following markup within the <body> tags of the page, just after @RenderBody():

<div id="wijcarousel0" class="">
<ul class="">
    <li class=""><img alt="1" src="http://lorempixum.com/750/300/abstract/1" title="Word" /><span>Word Caption 1</span></li>
    <li class=""><img alt="2" src="http://lorempixum.com/750/300/abstract/2" title="Word2" /><span>Word Caption 2</span></li>
    <li class=""><img alt="3" src="http://lorempixum.com/750/300/abstract/3" title="Word3" /><span>Word Caption 3</span></li>
    <li class=""><img alt="4" src="http://lorempixum.com/750/300/abstract/4" title="Word4" /><span>Word Caption 4</span></li>
    <li class=""><img alt="5" src="http://lorempixum.com/750/300/abstract/5" title="Word5" /><span>Word Caption 5</span></li>
    <li class=""><img alt="1" src="http://lorempixum.com/750/300/abstract/6" title="Word" /><span>Word Caption 1</span></li>
    <li class=""><img alt="2" src="http://lorempixum.com/750/300/abstract/7" title="Word2" /><span>Word Caption 2</span></li>
    <li class=""><img alt="3" src="http://lorempixum.com/750/300/abstract/8" title="Word3" /><span>Word Caption 3</span></li>
    <li class=""><img alt="4" src="http://lorempixum.com/750/300/abstract/9" title="Word4" /><span>Word Caption 4</span></li>
    <li class=""><img alt="5" src="http://lorempixum.com/750/300/abstract/10" title="Word5" /><span>Word Caption 5</span></li>
    </ul>
</div>

This markup will add content for a carousel widget to the page. In the next step, you'll set animation for the carousel.

After the closing </div> tag you added in the previous step, add the following markup to and set the animated options:

<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="Apply" onclick="changeProperties()" /></div>
</div></div>

This will add elements to customize the wijcarousel's animation. At run time, you can choose an easing style and click the Apply button to apply that style. Once a style is applied you can navigate through the images with the Previous or Next buttons to view the chosen animation.

After the closing </div> tag you added in the previous step, add the following markup to customize the style options:
```
<style type="text/css">
    #wijcarousel0
    {
        width:750px;
        height:300px;
    }
</style>
```
This will set the size of the wijcarousel widget.

After the closing </style> tag you added in the previous step, add the following jQuery script to initialize the wijcarousel widget:

<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>

This will initialize the carousel and add animation.

What You've Accomplished

Press F5 to run the application, select the check box, choose an easing style, and click the Apply button to apply that style. Once a style is applied you can navigate through the images with the Previous or Next buttons to view the chosen animation.