引導旋轉木馬滑塊與文本

Question

我在HTML和CSS沒有太多的知識，我使用的是引導旋轉木馬滑塊與文字在這裏，我想改變盒隨機的顏色明智

這裏是代碼我在用。

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

是有可能把它寫在CSS或任何需要的腳本。

Answer 1

您需要添加此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>