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.
- Add carousel images to Document and Media library.
- Create a web content using carousel web content structure and template and add it to site page.
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.
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.
Also read:
- How to create web content structure and template – Liferay 6.2
- How to render Web content inside portlet – Liferay 6.2
- How to create Web content in Liferay 6.2
Versions used: Liferay 6.2