Fork me on GitHub

Carousel

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
  }
);

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();
  }
);
Note: you could also use `boundingBox`, not only `contentBox` to be initialized.
Read more about the [differences between them](https://github.com/liferay/alloy-ui/wiki/FAQs).

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();
  }
);
For more information about configuration, check out our API Docs.