p:carousel - How to pause animation on mouse over

[averri]

Hi, I would like to know how to pause the p:carousel animation when mouse is over the component.

[averri]

Hi, after reading the Yahoo documentation, I've found the solution for the proposed problem.

How to pause p:carousel animation on mouse over:

Code: Select all

<p:carousel id="carouselID" widgetVar="carouselNice"
                value="#{lastMembers.list}" var="member" rows="4"
                autoPlayInterval="4000" circular="true"
                itemStyle="height: 200px; width: 150px">

All you need is to use the following script in the same page as p:carousel:

Code: Select all

<script type="text/javascript">
        $(document).ready( function() {
            $('#carouselID').hover(
                function() {carouselNice.stopAutoPlay()},
                function() {carouselNice.startAutoPlay()}
            );
        });
</script>

With this solution, when the mouse is over the carousel then the animation will stop. The animation starts again when the mouse leaves the carousel. Very easy!

PS.: If you have problems using the '$' variable, you can use 'jQuery' instead.

[webmeiker]

Provided code doesn't work for my carousel.

Code: Select all

<p:carousel id="carouselNews" widgetVar="wCarouselNews"...

These two variants doesn't work:

Code: Select all

<script type="text/javascript">
	jQuery(function() {
		$('#carouselNews').hover(
			function(){wCarouselNews.stopAutoPlay()},function(){wCarouselNews.startAutoPlay()}
		);															
	});				
</script>	

Code: Select all

<script type="text/javascript">
	jQuery(function() {
		$('#carouselNews').hover(
			function(){$(this).stopAutoPlay();$(this).startAutoPlay();}
		);															
	});				
</script>	

But this works ok (for a fading effect):

Code: Select all

<script type="text/javascript">
	jQuery(function() {
		$('#carouselNews').hover(
			function(){$(this).fadeOut(100);$(this).fadeIn(500);}
		);															
	});				
</script>	

Any help will be appreciated.

[pmartinezga]

Previous code doesn't work for me. But I found a way to achieve it.

What I had to do is not to provide the autoPlayInterval in the p:carousel component, but put it inside my javascript in order to get the setIntervalId to use it later in the stop function.

XHTML CODE:

Code: Select all

<p:carousel id="carouselID" widgetVar="carouselNice" pageLinks="5" rows="1" circular="true" itemStyle="border:none;height:365px;width:775px;">
	<p:graphicImage name="slide1.png" library="img/about" />
	<p:graphicImage name="slide2.png" library="img/about" />
	<p:graphicImage name="slide3.png" library="img/about" />
	<p:graphicImage name="slide4.png" library="img/about" />
	<p:graphicImage name="slide5.png" library="img/about" />
</p:carousel>

JS CODE:

Code: Select all

/*The the setIntervalId here is a global parameter*/
var idInterval = 0;
function startCarousel() {
	/*The interval in milisecond coud be passed as a parameter, here it is fixed*/
	carouselNice.cfg.autoPlayInterval = 6000;
	idInterval = setInterval(function() {
		carouselNice.next();
	}, carouselNice.cfg.autoPlayInterval);
}

$(document).ready(function() {
	startCarousel();

	$('#carouselID').hover(function() {
		clearInterval(idInterval);
	}, function() {
		startCarousel();
	});
});

[webmeiker]

Your code doesnt work for me.


I think JavaScript code is not able to identify 'carouselNice', so the lines like
carouselNice.next();
carouselNice.cfg.autoPlayInterval

..arent executed.

[rahul.gupt@gmail.com]

Try this. We have implemented this in our project and this works as a charm in PF 6.1.2

<p:carousel id="carouselID" widgetVar="carouselNice" pageLinks="5" rows="1" circular="true" itemStyle="border:none;height:365px;width:775px;">
<p:graphicImage name="slide1.png" library="img/about" />
<p:graphicImage name="slide2.png" library="img/about" />
<p:graphicImage name="slide3.png" library="img/about" />
<p:graphicImage name="slide4.png" library="img/about" />
<p:graphicImage name="slide5.png" library="img/about" />
</p:carousel>

JS Code
----------------------
$(window).load(function() {
var $this = PF('carouselNice');
if($this) {
var viewport = $this.jq.children('.ui-carousel-viewport');
viewport.on('hover.carousel mouseenter.carousel', function() {
$this.stopAutoplay();
}).on('mouseleave.carousel', function() {
$this.startAutoplay();
});
}
});

[dougnlizt]

Try this. We have implemented this in our project and this works as a charm in PF 6.1.2

<p:carousel id="carouselID" widgetVar="carouselNice" pageLinks="5" rows="1" circular="true" itemStyle="border:none;height:365px;width:775px;">
<p:graphicImage name="slide1.png" library="img/about" />
<p:graphicImage name="slide2.png" library="img/about" />
<p:graphicImage name="slide3.png" library="img/about" />
<p:graphicImage name="slide4.png" library="img/about" />
<p:graphicImage name="slide5.png" library="img/about" />
</p:carousel>

JS Code
----------------------
$(window).load(function() {
var $this = PF('carouselNice');
if($this) {
var viewport = $this.jq.children('.ui-carousel-viewport');
viewport.on('hover.carousel mouseenter.carousel', function() {
$this.stopAutoplay();
}).on('mouseleave.carousel', function() {
$this.startAutoplay();
});
}
});

I was able to get this to work using the above example, but I'm trying to understand the mechanics of this better. For example, I'm familiar with 'component.hover...', but not 'component.on('hover...)'. I'm not sure how you knew to call out 'hover.carousel mouseenter.carousel' for instance. I looked in the js code, but didn't see that anywhere, and I'm trying to determine where I missed that.

Thank you!

[kukeltje]

These are all jquery eventhandler concepts, not PF specific. So reading up on stackoverflow on this might result in more info

[bhonaker]

When I tried this on 6.2, I get an error at run time in the browser console that the carouselNice object didn't support an indexOf() method.

I tried to use carouselId as the PF call and that didn't change. I realize that the calls to startAutoPlay and stopAutoPlay methods should be called on the widgetVar object.

I understand that 6.2 had a major jquery update so that may have broken this method.

Anyone running this on 6.2?