Fire event on Bootstrap carousel slide issue

Question

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);
});

score 32 · Accepted Answer · edited May 23 '17 at 12:02

32

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.

edited May 23 '17 at 12:02

Community

1
1

answered Nov 21 '13 at 20:44

ringstaff

2,331
1
16
25

it works in Chrome, but fails to work in Mozilla. Any suggestions? – sdvnksv Nov 22 '13 at 14:33
Yes, it turned out that Mozilla has problems with animate(backgroundPositionX). I managed to fix it with a plugin. Now it works fine. – sdvnksv Nov 24 '13 at 06:16
I have searched everywhere for this question and finally got this answer. Thanks. – Pupil Oct 27 '16 at 02:58

Fire event on Bootstrap carousel slide issue

1 Answers1

Linked