Foren

p:carousel not rendering images

Venu Pattamatta, geändert vor 9 Jahren.

p:carousel not rendering images

Junior Member Beiträge: 29 Beitrittsdatum: 29.05.14 Neueste Beiträge
Hi,

I am using primefaces 5.0 with liferay faces 4.2.0-m1 release. The portlet contains a p:carousel element that swipes between 4 images loade from the resources directory. The below is my code

<f:view xmlns="http://www.w3.org/1999/xhtml" xmlns:ui="http://java.sun.com/jsf/facelets" xmlns:aui="http://alloy.liferay.com/tld/aui" xmlns:c="http://java.sun.com/jsp/jstl/core" xmlns:f="http://java.sun.com/jsf/core" xmlns:h="http://java.sun.com/jsf/html" xmlns:p="http://primefaces.org/ui">
	<h:head />
	<h:body>
		<h:form id="frmImgScroll" enctype="multipart/form-data">
			<p:carousel id="imgScroller" styleclass="imgScroller" autoplayinterval="5000" numvisible="1" circular="true">
				<p:graphicimage library="images" name="banner/1.jpg" style="max-width: 100% !important; height: auto !important" />
				<p:graphicimage library="images" name="banner/2.jpg" style="max-width: 100% !important; height: auto !important" />
				<p:graphicimage library="images" name="banner/3.jpg" style="max-width: 100% !important; height: auto !important" />
				<p:graphicimage library="images" name="banner/4.jpg" style="max-width: 100% !important; height: auto !important" />
			</p:carousel>
		</h:form>
	</h:body>
</f:view>


Since the images are on auto scroll, the header element is disabled using

.imgScroller &gt; .ui-carousel-header {
	margin: 0px 0px !important;
	height: 0px !important;
	overflow: hidden !important;
	padding: 0px 0px 0px !important;
	display: none !important;
	border: none !important;
}


The issue is that some times, the images are disappearing as shown in the attached image. Can anyone please assist.

Thanks,
Venu Pattamatta.
thumbnail
Vernon Singleton, geändert vor 9 Jahren.

RE: p:carousel not rendering images

Expert Beiträge: 315 Beitrittsdatum: 14.01.13 Neueste Beiträge
Hi Venu,

Venu Pattamatta:
I am using primefaces 5.0 with liferay faces 4.2.0-m1 release.

I am using primefaces5 with the latest liferay-faces 4.2.x.
Venu Pattamatta:
The portlet contains a p:carousel element that swipes between 4 images loade from the resources directory.

I am using the primefaces5-portlet that is part of the Liferay Faces project under the demos/bridge directory.
As stated in this previous thread, I am using a blurb in the applicant.xhtml file just above the form tag as follows:

<p:carousel autoplayinterval="5000" circular="true" numvisible="1" styleclass="imgScroller" value="#{listModelBean.provinces}" var="province">
	<h:panelgrid columns="1" style="width:100%;" cellpadding="5">
		<img src="#{resource['example:liferay-logo.png']}" title="Hello, South Africa, from Liferay.">
		<h:graphicimage value="#{resource['example:icon-delete.png']}" />
		<h:graphicimage library="example" name="clipboard.png" />
		<p:graphicimage value="#{resource['example:icon-help.png']}" />
		<h:outputtext value="province: #{province.provinceId}" />
		<h:outputtext value="#{province.provinceName}" />
	</h:panelgrid>
</p:carousel>


Venu Pattamatta:
Since the images are on auto scroll, the header element is disabled using ... snipped for brevity ...

I am using the same css you are to remove the header ...
Venu Pattamatta:

The issue is that some times, the images are disappearing as shown in the attached image. Can anyone please assist.

I am not able to re-produce your issue. The carousel is working fine.

Your problem sounds like it is intermittent. How often does this happen?
In your portal-ext.properties, try adding the following code:
layout.parallel.render.enable=false

Hope that helps,
Vernon