How to create a simple Carousel – Liferay 6.2

Most of the websites contain carousel images on the home page. Carousels make out website look good, and we can showcase products/ features or sections of the website.

In this article, we will learn how to create a simple carousel with clickable carousel images. We will use Liferay web content to implement the carousel component.

Versions details: Liferay 6.2

Table of Contents

• Create Liferay Carousel web content structure & template
• Add carousel images to Document and Media library
• Adding the carousel component
• Conclusion

Create Liferay Carousel web content structure & template

The first step is to create a web content structure and template. Creating a web content structure and template makes our carousel easily editable.

Create a web content structure with fields as shown below.

In the above web content structure, we added a file with the name Carousel_Image. This file selects the carousel images from the Document and Media library. 

Also, we added a title field to add a title to an individual carousel image and the imageurl field to add a clickable link on a carousel image. 

Make sure that the Carousel_Image field is repeatable so that we can add multiple carousel images.

Create a web content template with the created structure, and add the following template script into that.

<style>
div.carousel-item {
 width: 700px;
 height: 250px;
 border-radius: 6px;
}
</style>

#if (!$Carousel_Image.getSiblings().isEmpty())
 #set ($count = 0)
 < div id="myCarousel">
 #foreach ($cur_Carousel_Image in $Carousel_Image.getSiblings())
 < div style="background: url(http://localhost:8080$cur_Carousel_Image.getData());" id="carouselItem_$count" onclick="callOpen('$cur_Carousel_Image.URL.data')"></div>
 #set ($count = $count + 1)
 #end
 </div>
#end

< script>
YUI().use('aui-carousel', function(Y) {
  new Y.Carousel({
   contentBox: '#myCarousel',
   height: 250,
   width: 700
  }).render();
 });
function callOpen(str){
 window.open(str, '_blank');
}
</script>

In the above script, we are iterating the web content structure field Carousel_Image and assigning the image value to the background image of the <div> element.

We have added little CSS for our carousel. Also added the javascript function callOpen() to open a new window with URL entered in the imageurl filed of web content structure.

Add carousel images to Document and Media library

Now, we have our carousel structure and template ready, let’s add the carousel images to the Liferay portal’s document library.

Add a carousel image to the document and media library from Admin > Content > Documents and Media > Add > Basic Document and upload the carousel images.

Adding the carousel component

The final step is to create web content using carousel web content structure and template and add it to the site page.

Finally, our simple carousel is ready. The below images shows the carousel on the Liferay portal.

Conclusion

In this article, we learned how to create a simple carousel component on the Liferay portal application.

We also learned how to upload the carousel images and display those carousel images using the carousel component.