Bootstrap旋轉木馬與圖像內的按鈕

因此，我正在使用自舉傳送帶製作幻燈片。我想擁有圖像內的按鈕，而不是圖像外部的按鈕。代碼如下，你必須把它放在一個名爲photo1.jpg photo2.jpg和photo3.jpg的圖像文件夾中。Bootstrap旋轉木馬與圖像內的按鈕

<!DOCTYPE html> 
<html lang="en"> 
    <head> 
     <title>Graphic design</title> 
     <meta charset="utf-8"> 
     <meta name="viewport" content="width=device-width, intial-scale-1"> 
     <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css"> 
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> 
     <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script> 
     <style> 
     .carousel-inner > .item > img, 
     .carousel-inner > .item a > img { 
      width:70%; 
      margin: auto; 
     } 
     </style> 
    </head> 
    <body> 

    <div class="container-fluid"> 
     <h1>Carter Goff Graphic Design</h1> 
     <nav class="navbar navbar-default"> 
      <div class="container-fluid"> 
       <div> 
        <ul class = "nav navbar-nav"> 
         <li class="active"><a href="#"><span class="glyphicon glyphicon-home"></span></a></li> 
         <li><a href="#">About</a></li> 
         <li><a href = "#">Contact</a></li> 
        </ul> 
       </div> 
      </div> 
     </nav> 
    </div> 
    <div class = "container"> 
     <br> 
     <div id="myCarousel" class="carousel slide" data-ride="carousel"> 
      <ol class="carousel-indicators"> 
       <li data-target="#myCarousel" data-slide-to="0" class = "active"></li> 
       <li data-target="#myCarousel" data-slide-to="1"</li> 
       <li data-target="#myCarousel" data-slide-to="2"</li> 
      </ol> 
      <div class="carousel-inner" role="listbox"> 
       <div class="item active"> 
        <img src="photo1.jpg" alt="photo" width="500"> 
       </div> 

       <div class="item"> 
        <img src="photo2.jpg" alt="photo" width="500"> 
       </div> 

       <div class="item"> 
        <img src="photo3.jpg" alt="photo" width="500"> 
       </div> 
      </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> 

    </body> 
</html>

謝謝！

來源

2015-07-21 Carter Goff

你可以用絕對定位做到這一點，或者你可以只作元素你的照片的背景，然後你可以把任何你想要在它：

.item1{ 
    background: url(pathtothebackground); 
    //any other css for your item 
}

來源

2015-07-21 18:40:45

Bootstrap旋轉木馬與圖像內的按鈕

回答

相關問題