Liferay

How to create a simple Carousel – Liferay 6.2

Article about how to create a simple Liferay carousel component using AUI-carousel.

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

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.

carousel_image2

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.

Advertisements
<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.

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.

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.

carousel_image1

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.