Having limited knowledge in html and css, I am using a bootstrap carousel slider with text. I am trying to change the color of the box randomly. https://i.sstatic.net/TozUP.jpg
Here is the code that I am currently using:
<ol class="carousel-indicators">
<li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
<li data-target="#carousel-example-generic" data-slide-to="1"></li>
<li data-target="#carousel-example-generic" data-slide-to="2"></li>
</ol>
<div class="carousel-inner text-center" role="listbox">
<div class="item active">
<div class="col-lg-6 pull-right">
<img src="#">
</div>
<div class="col-lg-6">
<h2>Sed vel lectus<br>
<small>by Merovingi
</small></h2>
<p>
Sed vel lectus. Donec odio urna,
</p>
<a class='btn btn-info pull-right' href="/article/show/sed-vel-lectus/9">
<i class="fa fa-long-arrow-right"> </i></a>
</div>
</div>
<div class="item">
<div class="col-lg-6 pull-right">
<img src="#">
</div>
<div class="col-lg-6">
<h2>Proin porta auctor nisi<br>
<small>by Merovingio in Jun 22, 2017 at
00:34</small></h2>
<p>
Proin porta auctor nisi in interdum.
</p>
<a class='btn btn-info pull-right' href="/article/show/sed-vel-lectus/9">
<i class="fa fa-long-arrow-right"> </i></a>
</div>
</div>
<div class="item">
<div class="col-lg-6 pull-right">
<img src="#">
</div>
<div class="col-lg-6">
<h2>Aenean sodales<br>
<small>by Merovingio in Jun 22, 2017 at
00:33</small></h2>
<p>
Aenean sodales, leo eu euismod tincidunt, felis odio aliquam velit,
</p>
<a class='btn btn-info pull-right' href="/article/show/sed-vel-lectus/9">
<i class="fa fa-long-arrow-right"> </i></a>
</div>
</div>
</div>
<a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
http://jsfiddle.net/ssoorajs/gbvscs64/
Would it be possible to achieve this using css alone, or would any scripting be necessary?