Carousel

• Introduction
• Basic Example
• Real World Example

Provides an interactive way of cycling through elements.

Getting Started

First load the seed and CSS files, if you haven't yet.

<script src="https://cdn.alloyui.com/3.0.1/aui/aui-min.js"></script>
<link href="https://cdn.alloyui.com/3.0.1/aui-css/css/bootstrap.min.css" rel="stylesheet"></link>

Then initialize AlloyUI and load the Carousel module.

YUI().use(
  'aui-carousel',
  function(Y) {
    // code goes here
  }
);

Using Carousel

Create a list of elements that contains the images you want to show:

<div id="myCarousel">
  <div class="image-viewer-base-image" style="background: url(https://alloyui.com/carousel/img/1.jpg);"></div>
  <div class="image-viewer-base-image" style="background: url(https://alloyui.com/carousel/img/2.jpg);"></div>
  <div class="image-viewer-base-image" style="background: url(https://alloyui.com/carousel/img/3.jpg);"></div>
  <div class="image-viewer-base-image" style="background: url(https://alloyui.com/carousel/img/4.jpg);"></div>
</div>

Now create a new instance of Carousel component, then tell to contentBox where it's going to be attached and define some width and height. Finally, let's render it!

YUI().use(
  'aui-carousel',
  function(Y) {
    new Y.Carousel(
      {
        contentBox: '#myCarousel',
        height: 250,
        width: 700
      }
    ).render();
  }
);

Configuring Carousel

There are some other options that you can pass to your Carousel instance.

For example, you can set the first image that will appear by defining an activeIndex - any number or rand (random value) to indicate the image.

YUI().use(
  'aui-carousel',
  function(Y) {
    new Y.Carousel(
      {
        activeIndex: 'rand',
        contentBox: '#myCarousel',
        height: 250,
        width: 700
      }
    ).render();
  }
);

Also, you can set the amount of time each image is displayed before proceeding to the next by changing the value of intervalTime.

YUI().use(
  'aui-carousel',
  function(Y) {
    new Y.Carousel(
      {
        contentBox: '#myCarousel',
        height: 250,
        intervalTime: 2,
        width: 700
      }
    ).render();
  }
);