I have an array of items, each containing a background property with a URL to an image. Here is my array:
Here is the HTML structure:
<div id="myCarousel" class="carousel slide" data-ride="carousel">
<ol class="carousel-indicators"></ol>
<div class="carousel-inner" role="listbox"></div>
<a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
And here is the script using a jQuery plugin:
$(items).each(function(index){
$('.carousel-inner', self).append('<div class="item"><div class="container"><div class="carousel-caption">' + this.tournamentName + ' / ' + this.matchStatusName + '</div>');
$('.carousel-inner div.item.active').css('background', 'url(' + this.background + ')');
$('.carousel-indicators', self).append('<li data-target="#myCarousel" data-slide-to="'+index+'"></li>');
$('.carousel-indicators li:first, .carousel-inner div.item:first', self).addClass('active');
$(self).carousel();
});
I have tried setting the background like
$('.carousel-inner .item.active').css('background', 'url(' + this.background + ')');$('.carousel-inner div.item.active').css('background', 'url(' + this.background + ')');Can anyone provide some assistance?