Bootstrap-Karussell Slider mit Text

Question

Ich hatte nicht viel Wissen in HTML und CSS, ich bin mit einem Bootstrap-Karussell Slider mit Text hier mag ich zufällig die Farbe der Box ändern wiese

hier ist der Code, ich benutze.

<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/

ist es möglich, es in CSS zu schreiben oder jedes Skript benötigt wird.

Answer 1

Sie benötigen diese 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>

hinzufügen