Set Orientation

The wijcarousel widget allows users to set a horizontal or vertical orientation. Simply set the orientation option to take advantage of this feature. See the Carousel > Orientation sample of the MVC Control Explorer live demo at http://demo.componentone.com/ASPNET/MVCExplorer/carousel/Orientation for an example.

Complete the following steps to set the expand direction:

Create a new ASP.NET MVC 5 Wijmo Application (see Creating an MVC Tools Project).
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">
    <ul>
    <li>
      <img alt="1" src="http://lorempixum.com/200/150/sports/1" title="Word" /><span>Word Caption 1</span></li>
    <li>
      <img alt="2" src="http://lorempixum.com/200/150/sports/2" title="Word2" /><span>Word Caption 2</span></li>
    <li>
      <img alt="3" src="http://lorempixum.com/200/150/sports/3" title="Word3" /><span>Word Caption 3</span></li>
    <li>
      <img alt="4" src="http://lorempixum.com/200/150/sports/4" title="Word4" /><span>Word Caption 4</span></li>
    <li>
      <img alt="5" src="http://lorempixum.com/200/150/sports/5" title="Word5" /><span>Word Caption 5</span></li>
    <li>
      <img alt="6" src="http://lorempixum.com/200/150/sports/6" title="Word6" /><span>Word Caption 6</span></li>
    <li>
      <img alt="7" src="http://lorempixum.com/200/150/sports/7" title="Word7" /><span>Word Caption 7</span></li>
    <li>
      <img alt="8" src="http://lorempixum.com/200/150/sports/8" title="Word8" /><span>Word Caption 8</span></li>
    <li>
      <img alt="9" src="http://lorempixum.com/200/150/sports/9" title="Word9" /><span>Word Caption 9</span></li>
    <li>
      <img alt="10" src="http://lorempixum.com/200/150/sports/10" title="Word10" /><span>Word Caption 10</span></li>
    </ul>
    </div>
    <div id="wijcarousel1">
    <ul>
    <li>
      <img alt="1" src="http://lorempixum.com/200/150/abstract/1" title="Word" /><span>Word Caption 1</span></li>
    <li>
      <img alt="2" src="http://lorempixum.com/200/150/abstract/2" title="Word2" /><span>Word Caption 2</span></li>
    <li>
      <img alt="3" src="http://lorempixum.com/200/150/abstract/3" title="Word3" /><span>Word Caption 3</span></li>
    <li>
      <img alt="4" src="http://lorempixum.com/200/150/abstract/4" title="Word4" /><span>Word Caption 4</span></li>
    <li>
      <img alt="5" src="http://lorempixum.com/200/150/abstract/5" title="Word5" /><span>Word Caption 5</span></li>
    <li>
      <img alt="6" src="http://lorempixum.com/200/150/abstract/6" title="Word6" /><span>Word Caption 6</span></li>
    <li>
      <img alt="7" src="http://lorempixum.com/200/150/abstract/7" title="Word7" /><span>Word Caption 7</span></li>
    <li>
      <img alt="8" src="http://lorempixum.com/200/150/abstract/8" title="Word8" /><span>Word Caption 8</span></li>
    <li>
      <img alt="9" src="http://lorempixum.com/200/150/abstract/9" title="Word9" /><span>Word Caption 9</span></li>
    <li>
      <img alt="10" src="http://lorempixum.com/200/150/abstract/10" title="Word10" /><span>Word Caption 10</span></li>
    </ul>
</div>

This markup will add content for two carousel widgets to the page. In the next step, you'll set the orientation for the carousels.

After the closing </div> tag you added in the previous step, enter the following jQuery script to initialize the wijcarousel widgets and set the orientation option:

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

One of the carousels will be vertically oriented and one will be horizontally orientated (default).

What You've Accomplished

Press F5 to run the application, and notice that one of the carousels is vertically oriented and one is horizontally orientated.