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
Since the images are on auto scroll, the header element is disabled using
The issue is that some times, the images are disappearing as shown in the attached image. Can anyone please assist.
Thanks,
Venu Pattamatta.
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 > .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.
Anhänge:
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,
I am using primefaces5 with the latest liferay-faces 4.2.x.
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:
I am using the same css you are to remove the header ...
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:
Hope that helps,
Vernon
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