Additional Configuration - JavaScript

The carousel currently has few configurable properties due to its beta status, but don’t worry, this is sure to change as the component grows. Let’s put some of the available properties to use in this next stage in the example; change the carousel constructor method in our final <script> element in carousel2.htmlso that it appears as follows (new code is shown in bold): 

var carousel = new YAHOO.widget.Carousel("scientists", {

animation: { speed: 0.5 },

isCircular: true

});

We also need to link to another library resource for this example, the animation utility, to add animation to the carousel; add the following <script> element directly before the carousel’s source file: 

<script type="text/javascript" src="http://yui.yahooapis.com/2.6.0/build/animation/animation-min.js"></script>

Save the changes as carousel3.html. We used two properties in this example, the animation and isCircular properties. The animation property, which takes a literal object containing the animation parameters, enables the smooth animation of page changes in the carousel. Click on one of the buttons to see the animation in action. 

The second property enables circular behavior in the control, where instead of just ending on the final page, the component switches back to the first page automatically. Again, just run the page and check it out.