Most of us would have seen the carousel on Liferay’s home page (http://www.liferay.com/). The Carousel widget is a continuous, circular navigation of a collection of items (divs or images).
The Carousel portlet can be configured through the Preferences mode of the portlet. The Preferences mode has a configuration screen where the following features are specified by the user:
- Height & Width
- Pause Interval
- Css Style
- Tag name
The height and width of the portlet is specified in pixels, and should match the size of the images that you want to render in the carousel. Pause Interval is the time interval between any two images in seconds. Css Style is used to change the default css style definitions. For instance, if the user does not want to display some of the buttons like the previous button or the next button, he/she can enter the css such that the buttons are not displayed. The carousel pulls all the images tagged with the names specified in the ‘Tag Name’ selector.
1. Create a Document Type
Create a document type called ‘Image’ in the Liferay “documents and media” portlet . The document type has the following meta data fields.
|Field Label||Field Name||Type|
2. Create an image
Enter the values for the fields created as a part of the ‘Image’ document type. The image to be displayed is uploaded through the File Uploader. Sequence denotes the sequence in which the images are to be rendered in the carousel. Link specifies the target link to be used when the image is clicked. Alternate Text is the text that is displayed when user hovers over a carousel image.
3. Preferences mode
Go to the ‘Preferences’ mode of the portlet. Enter all the configuration details and the tag name to be used by the carousel to display the images.
The carousel now slides through all the images tagged with the name selected in the configuration screen .
For more information about this portlet or to obtain a copy of it (free of charge), contact us at email@example.com.