[英]Replace carousel indicators with images
我有一個旋轉木馬，我想用圓形圖像替換指示器，每當出現該圖像時，圖像就會出現但指示器並沒有消失，我想移動指示器並將圖像保留為指示器，並且我想移動指示器左側的指示器，我該怎么做？ 這是我的代碼：
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> <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"><img src=" http://placehold.it/140x100" alt="..."> </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" role="listbox"> <div class="item active"> <img src=" http://placehold.it/350x150" alt="..."> <div class="carousel-caption"> ... </div> </div> <div class="item"> <img src=" http://placehold.it/350x150" alt="..."> <div class="carousel-caption"> ... </div> </div> ... </div> <!-- Controls --> <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> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
請嘗試使用此方法，如果您需要進一步的幫助，請在答案下方添加注釋。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<style>
.carousel-indicators{
list-style: none;
}
.carousel-indicators li, .carousel-indicators li.active{
width: 70px;
height: 70px;
background-color: #fff;
position: relative;
margin: 10px;
}
.carousel-indicators img{
position: absolute;
width: 100%;
border-radius: 50%;
height: 100%;
top: 0;
left: 0;
}
</style>
</head>
<body>
<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"><img src=" http://placehold.it/70x70" alt="..."></li>
<li data-target="#carousel-example-generic" data-slide-to="1"><img src=" http://placehold.it/70x70" alt="..."></li>
<li data-target="#carousel-example-generic" data-slide-to="2"><img src=" http://placehold.it/70x70" alt="..."></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">
<div class="item active">
<img src=" http://placehold.it/350x150" alt="...">
<div class="carousel-caption">
1
</div>
</div>
<div class="item">
<img src=" http://placehold.it/350x150" alt="...">
<div class="carousel-caption">
2
</div>
</div>
<div class="item">
<img src=" http://placehold.it/350x150" alt="...">
<div class="carousel-caption">
2
</div>
</div>
</div>
<!-- Controls -->
<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>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
</body>
</html>
.carousel-indicators { left:0!important; margin-left:0!important; right:0; width:100%; text-align:left!important } .carousel-indicators li{ border:none!important; background:none!important; position:relative; text-indent:0!important; } .carousel-indicators li img{ width:10px; height:10px; border-radius:5px; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> <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"><img src=" http://clipart-library.com/images/6Tp5aB97c.png" alt="..."> </li> <li data-target="#carousel-example-generic" data-slide-to="0" class="active"><img src=" http://clipart-library.com/images/6Tp5aB97c.png" alt="..."> <li data-target="#carousel-example-generic" data-slide-to="0" class="active"><img src=" http://clipart-library.com/images/6Tp5aB97c.png" alt="..."> </ol> <!-- Wrapper for slides --> <div class="carousel-inner" role="listbox"> <div class="item active"> <img src=" http://placehold.it/350x150" alt="..."> <div class="carousel-caption"> ... </div> </div> <div class="item"> <img src=" http://placehold.it/350x150" alt="..."> <div class="carousel-caption"> ... </div> </div> ... </div> <!-- Controls --> <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> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
使用“ .carousel-indicators ”類將輪播指示器的位置從底部更改為左
在css文件的底部添加此樣式。
.carousel-indicators {
text-align: left;
left: inherit;
width: 15px;
top: 47%;
position: absolute;
left: 2%;
margin-left: 0;
}
帶有圖像指示器的Bootstrap輪播，就像縮略圖不工作一樣
[英]Bootstrap carousel with images indicators, like thumbnails not working
Bootstrap > Carousel > 需要匹配圖片的指標數量
[英]Bootstrap > Carousel > number of Indicators needs to match the images
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.