Primefaces Carousel slider not working

[10年前 に Luis Casillas によって更新されました。]

Hi,

I try to use the primefaces Carousel component in liferay 6.2 but the slider doesn't work, I need help.

Regards

[10年前 に Vernon Singleton によって更新されました。]

Hi Luis,

Luis Casillas:

I try to use the primefaces Carousel component in liferay 6.2 but the slider doesn't work, I need help.

I added this to the primefaces4-portlet demo, and it is working fine:

	<h3>Basic Carousel</h3>  
	<p:carousel id="basicCarousel" value="#{listModelBean.provinces}" var="province">
		<h:panelgrid columns="1" style="width:100%" cellpadding="5">
			<h:outputtext value="province: #{province.provinceId}" />
			<h:outputtext value="#{province.provinceName}" />
		</h:panelgrid>
	</p:carousel>

Here is a screenshot:


Maybe you could describe some of the symptoms of the failure you are seeing.

.

[10年前 に Luis Casillas によって更新されました。]

Hi, thanks for your help, this is my view.xhtml, the problem is the image doesn't slide, the carousel only show one image and i have 3 images to show.

<h:head />
	<h:body>
		<p:carousel id="carrusel" value="#{imagenBean.img}" var="carr" itemstyleclass="carItem" numvisible="1" effect="slide">
			<f:facet name="header">
				Imagenes
			</f:facet>
			<h:panelgrid columns="1" style="width:100%" cellpadding="5">
				<p:graphicimage value="#{carr.url}" />
			</h:panelgrid>
			<f:facet name="footer">
				mbge images
			</f:facet>
		</p:carousel>
	</h:body>

[10年前 に Vernon Singleton によって更新されました。]

Hi Luis,

Luis Casillas:

Hi, thanks for your help, this is my view.xhtml, the problem is the image doesn't slide, the carousel only show one image and i have 3 images to show.

<h:head />
	<h:body>
		<p:carousel id="carrusel" value="#{imagenBean.img}" var="carr" itemstyleclass="carItem" numvisible="1" effect="slide">
...</p:carousel></h:body>

I just tried again using the primefaces4-portlet demo as follows:

	<h3>Basic Carousel</h3>  
	<p:carousel id="basicCarousel" value="#{listModelBean.provinces}" numvisible="1" var="province">
		<h:panelgrid columns="1" style="width:100%;" cellpadding="5">
		
			<img src="#{resource['example:liferay-logo.png']}" title="Hello, Mexico, 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>

I used 4 different images, each of 4 different ways which you can see above, and they all worked. I can only see one panel of images (at a time) because numVisible="1". The images slide just fine. I even got a screenshot for you mid-slide. If I remove the numVisible attribute, 3 panels render all at once, and all the images show up just fine, and it slides left and right without any issues.

I also tried other p:carousel attributes such as autoPlayInterval="4000", circular="true", effect="fade", etc ... and it's all working well.

Are you getting any Javascript errors in your console?
I am not getting any errors, or symptoms of failure.

[10年前 に Luis Casillas によって更新されました。]

Hi Vernon,

sorry for the delay, I could not make the carousel work, show me a single image, I can not change it, even though at the top shows me 3 links ...

Regards


Image

[10年前 に Vernon Singleton によって更新されました。]

Hi Luis,

Is the primefaces3-portlet demo working for you?

- Vernon

[10年前 に Luis Casillas によって更新されました。]

Hi Vernon,

I've solved the problem, I added the new version of primefaces in my project and it worked, Vernon thanks for your help.

Regards

[10年前 に Vernon Singleton によって更新されました。]

Glad to see that you got it working.
Enjoy using Liferay Faces.