1

I've got this code:

var $carousel = $('#carousel-showcase');
$carousel.carousel();

$carousel.bind('slide.bs.carousel', 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);
});

to fire off an animate function on slide change in the bootstrap 3 carousel. Everything works fine in Chrome, however it doesn't work in Mozilla. Any suggestions?

kjhughes
  • 106,133
  • 27
  • 181
  • 240
sdvnksv
  • 9,350
  • 18
  • 56
  • 108

1 Answers1

0

backgroundPositionX (or Y) works only in webkit or IE (see this answer). You'll have to use the css function for all other browsers: 

$("#wrap").css('backgroundPosition','45% 0%');

See this fiddle for an example.

Community
  • 1
  • 1
ringstaff
  • 2,331
  • 1
  • 16
  • 25