Home arrow JavaScript arrow Page 3 - A Look at the New YUI Carousel Control

Additional Configuration - JavaScript

The Yahoo! User Interface library continues to grow and expand with new components being added and existing components being continually patched and updated to ensure full x-browser support and cutting-edge functionality. Version 3 of the YUI is due for full release at some point this year, but version 2 (current release 2.6) is at this point still the stable and recommended release for general use.

TABLE OF CONTENTS:
  1. A Look at the New YUI Carousel Control
  2. Enhancing the Page
  3. Additional Configuration
  4. Working with Carouselís Custom Events
By: Dan Wellman
Rating: starstarstarstarstar / 15
April 13, 2009

print this article
SEARCH DEV SHED

TOOLS YOU CAN USE

advertisement

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. 



 
 
>>> More JavaScript Articles          >>> More By Dan Wellman
 

blog comments powered by Disqus
escort Bursa Bursa escort Antalya eskort
   

JAVASCRIPT ARTICLES

- Javascript for Beginners: An Introduction
- Introduction to JavaScript
- Adding Elements to a Tree with TreeView jQue...
- Using the Persist Argument in a TreeView jQu...
- Using Unique and Toggle in a TreeView jQuery...
- Using Event Delegation for Mouseover Events ...
- Using the Animate Option in a Treeview jQuer...
- Using HTML Lists with Event Delegation in Ja...
- Opened and Closed Branches on a TreeView jQu...
- Mouseover Events and Event Delegation in Jav...
- Creating a TreeView JQuery Hierarchical Navi...
- Event Delegation in JavaScript
- A Look at the New YUI Carousel Control
- Working with Draggable Elements and Transpar...
- Displaying Pinned Handles with Resizable Con...

Developer Shed Affiliates

 


Dev Shed Tutorial Topics: