Liferay is easy: Carousel in Liferay using Portlet

Wednesday, March 30, 2016

Carousel in Liferay using Portlet

Today we will discuss how to create carousel in Liferay using Portlet.Before reading it is highly recommended to read my previous blog on Carousel in Liferay using web content.

So lets start this step by step:-

Step 1:-Create Liferay Project and Portlet
Create a Liferay project and than create a MVCPortlet in it. Now we have to save images that can be used in carousel. Create a folder inside docroot with name images and add all the images in it.

Step 2:-Change view.jsp
Open view.jsp and paste this:-

	<%@ taglib uri="http://java.sun.com/portlet_2_0" prefix="portlet" %>
	<portlet:defineObjects />

	<div id="liferayiseasy">
	<div style="background: url(/carousel-portlet/images/1.jpg); width: 780px; height: 253px;"></div>
	<div style="background: url(/carousel-portlet/images/2.jpg); width: 780px; height: 253px;"></div>
	<div style="background: url(/carousel-portlet/images/3.jpg); width: 780px; height: 253px;"></div>
	<div style="background: url(/carousel-portlet/images/4.jpg); width: 780px; height: 253px;"></div>
	</div>

	<script type="text/javascript">
	YUI().use(
	'aui-carousel',
	function(Y) {
	new Y.Carousel(
	{
	contentBox: '#liferayiseasy',
	height: 250,
	width: 700
	}
	).render();
	}
	);
	</script>