I try to use this code to fire on an event upon carousel slide, but it fails to work for some reason. Any suggestions?
var $carousel = $('#carousel-showcase');
$carousel.carousel();
$carousel.bind('slide', function(e) {
setTimeout( function(){
var left = $carousel.find('.item.active.left');
var right = $carousel.find('.item.active.right');
if(left.length > 0) {
$("#wrap").animate({
backgroundPositionX: '+=50%'
},0);
}
else if(right.length > 0) {
$("#wrap").animate({
backgroundPositionX: '-=50%'
},0);
}
}, 500);
});
In browsers where the Page Visibility API is supported, the carousel will avoid sliding when the webpage is not visible to the user (such as when the browser tab is inactive, the browser window is minimized, etc.).
All carousel events are fired at the carousel itself (i.e. at the <div class="carousel"> ). This event fires immediately when the slide instance method is invoked.
Use the [interval]="'0'" input. This will disable the auto-sliding feature. Here's the link to the Carousel Documentation.
The data-pause attribute pauses the carousel from going through the slides when the mouse pointer enters the carousel. In this example, we have set pause to "hover" (default), which will stop the slide when your mouse pointer enters the carousel.
Bootstrap 3 changed the 'slide' event to 'slide.bs.carousel'. Change to this and it should work (assuming that is your only issue):
$carousel.bind('slide.bs.carousel', function (e) {
console.log('slide event!');
});
See this question.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With