Change Background Image When Bootstrap carasoule change


Jquery
$(function(){
$(‘#myCarousel’).bind(‘slid’, function(e){ //This event is fired when the carousel has completed its slide transition.

index = $(‘#myCarousel .item’).index($(‘#myCarousel .carousel-inner .active’)); // find the index of current slide

$(‘.carousel-navbar .current’).removeClass(‘current’); // reset the navigation

$(‘.carousel-nav’).eq(index).addClass(‘current’); // update the navigation
$(“body”).attr(“style”,”background :url(‘images/”+($(‘#myCarousel .active’).attr(“slider_image”))+”‘) no-repeat scroll center top rgba(0, 0, 0, 0) !important”);
});

});

HTML Code


Chnage Image at here in above html code ======> slider_image=”image.jpg”

Reference Link : http://mohsinrasool.wordpress.com/2012/12/13/paging-carousel-using-twitter-bootstrap/

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s