I am using Twitter Bootstrap to create a carousel on my website. Currently, I have set the foreground image as the current image and the background image as the next one. However, I want to adjust the opacity of just the background image. Can someone please help me figure out how to do this? Below is the snippet of code I am working with:
CSS code
.carousel
{
background-image:url("img_tree.png");
background-repeat:no-repeat;
}
.carousel .item {
align: 'center';
margin-right: 10%;
margin-left: 10%;
background-color: black;
}
HAML code
#carousel-example-generic.carousel.slide
%ol.carousel-indicators
%li.active{"data-slide-to" => "0", "data-target" => "#carousel-example-generic"}
%li{"data-slide-to" => "1", "data-target" => "#carousel-example-generic"}
%li{"data-slide-to" => "2", "data-target" => "#carousel-example-generic"}
/ Wrapper for slides
.carousel-inner
- images_for_carousel.each do |item|
- if item == 1
.item.active
= image_tag("slide#{item}.jpg", :alt => "image_#{item}")
.carousel-caption
- else
.item
= image_tag("slide#{item}.jpg", :alt => "image_#{item}")
/ Controls
= link_to("#carousel-example-generic", class: "left carousel-control", "data-slide" => "prev") do
%span.icon-prev
= link_to("#carousel-example-generic", class: "right carousel-control", "data-slide" => "next") do
%span.icon-next
Jquery code
$('#carousel-example-generic').carousel().on('slide.bs.carousel', function () {
var previous_image_number = parseInt($('.carousel').css('background-image').match(/([0-9].jpg)/)) + 1;
$('.carousel').css('background-image', 'url(' + '/assets/slide' + previous_image_number + '.jpg' + ')')
})
Image