带有文本的自举轮播滑块

Question

I had not much knowledge in html and css,i am using a bootstrap carousel slider with text here i want to change the colour of the box random wise

here is the code that i am 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/

is it possible to write it in css or any script is needed.

Answer 1

You need to add this CSS

.item:nth-child(1){ background:green; overflow:hidden;} .item:nth-child(2){ background:blue; overflow:hidden;} .item:nth-child(3){ background:yellow; overflow:hidden;}

 .carousel { padding-bottom: 25px } .carousel img { padding-top: 20px; } .carousel h2 { color: #0072b5; } .carousel h2 small { color: #289bde } .carousel col-lg-4 p { text-align: center; } .item:nth-child(1){ background:green; overflow:hidden;} .item:nth-child(2){ background:blue; overflow:hidden;} .item:nth-child(3){ background:yellow; overflow:hidden;} 

 <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" /> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> <div class='containerbanner carousel'> <div id="carousel-example-generic" class="carousel slide" data-ride="carousel"> <!-- Indicators --> <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> <!-- Wrapper for slides --> <div class="carousel-inner text-center" role="listbox"> <div class="item active"> <div class="col-lg-6 pull-right"> <img src="http://lorempixel.com/g/750/350/transport"> </div> <div class="col-lg-6"> <h2>Sed vel lectus<br> <small>by Merovingio in Jun 22, 2017 at 21:59</small></h2> <p> Sed vel lectus. Donec odio urna, tempus molestie, porttitor ut, iaculis quis, sem. Phasellus rhoncus. Aenean id metus id velit ullamcorper pulvinar. Vestibulum fermentum tortor id mi. Pellentesque ipsum. Nulla non arcu lacinia neque faucibus... Pellentesque ipsum. Nulla non arcu lacinia neque faucibus... Pellentesque ipsum. Nulla non arcu lacinia neque faucibus... Pellentesque ipsum. Nulla non arcu lacinia neque faucibus... </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="http://lorempixel.com/g/750/350/cats"> </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. Praesent a accumsan neque. Quisque ut nulla ac libero egestas tristique. Nunc venenatis elit lorem, ut viverra neque rhoncus a. Proin erat risus, pharetra vitae elementum eget, accumsan ornare mauris. Praesent... </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="http://lorempixel.com/g/750/350/fashion"> </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, quis porta lorem erat eget erat. Aliquam porta libero erat, sed aliquet est sollicitudin a. Curabitur nec tellus in eros egestas venenatis ac sed nisl. In consectetur nisl eget... </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> <span class="sr-only">Previous</span> </a> <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next"> <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span> <span class="sr-only">Next</span> </a> </div> </div>