Most of the web sites contains carousel images on home page. Carousels makes out web site look good and we can showcase products/ features or sections of the web site. In this article, we will learn how to create a simple carousel with clickable carousel images using Liferay web content.

Following are the main steps to create carousel:

Create a Carousel web content structure and web content template

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

Create a web content structure with fields as shown below.

carousel_image2

In above web content structure, we added a filed named Carousel_Image to select carousel image from Document and Media library. A Title field to add a title to individual carousel image and an imageurl field to add a clickable link on carousel image. Make sure that Carousel_Image field is made repeatable, so that we can add multiple carousel images.

Create a web content template with above 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 above script, we are iterating the web content structure field Carousel_Image and assigning the image value to background-image of <div> element. We have added little CSS for our carousel. Also added java script 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

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

Create a web content using carousel web content structure and template and add it to site page

Final step is to Create a web content using carousel web content structure and template and add it to site page.

Finally our simple carousel is ready.

carousel_image1

Also read:

Versions used: Liferay 6.2