如何在 bootstrap3 轮播滑块中添加 icons/images 作为指示器而不是列表圆圈
How to add icons/images as indicators rather than list circles in bootstrap3 carousel slider
您好,我正在尝试制作一个 bootstrap3 旋转木马滑块,我想添加一些图像作为幻灯片指示器而不是列表默认圆圈。
Html 标记:
<div id="carousel-slider" class="carousel slide" data-ride="carousel" data-interval="5000">
<!-- Slider Indicators -->
<ul class="carousel-indicators">
<li data-target="#carousel-slider" data-slide-to="0" class="active"></li>
<li data-target="#carousel-slider" data-slide-to="1"></li>
<li data-target="#carousel-slider" data-slide-to="2"></li>
</ul><!--/ Indicators end-->
</div>
如果我添加如下 img 标签:
<div id="carousel-slider" class="carousel slide" data-ride="carousel" data-interval="5000">
<!-- Slider Indicators -->
<ul class="carousel-indicators">
<li data-target="#carousel-slider" data-slide-to="0" class="active">
<div class="thumbnail">
<img class="img-responsive" src="https://s3.amazonaws.com/ooomf-com-files/wdXqHcTwSTmLuKOGz92L_Landscape.jpg">
</div></li>
<li data-target="#carousel-slider" data-slide-to="1"></li>
<li data-target="#carousel-slider" data-slide-to="2"></li>
</ul><!--/ Indicators end-->
<div>
它没有显示任何内容。如何实现添加图像作为指示器而不是
圆圈?
我认为最重要的是覆盖 .carousel-indicators
.
内 li
标签的 width
和 height
属性
为此,我创建了一个名为 .carousel-indicators--thumbnails
的附加修饰符 css class,并将其添加到 .carousel-indicators
div
。此修饰符 class 用于覆盖 li
、.active
和 .active .thumbnail
class.
.carousel-indicators.carousel-indicators--thumbnails li {
width: 80px;
height: 40px;
margin: 0;
border: none;
border-radius: 0;
}
.carousel-indicators.carousel-indicators--thumbnails .active {
background-color: transparent;
}
.carousel-indicators.carousel-indicators--thumbnails .active .thumbnail {
border-color: #337ab7;
}
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet" />
<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
<div class="container">
<div class="row">
<div class="col-xs-12 col-md-8 col-md-offset-2">
<div id="carousel-example-generic" class="carousel slide" data-ride="carousel" data-interval="5000">
<!-- Indicators -->
<ol class="carousel-indicators carousel-indicators--thumbnails">
<li data-target="#carousel-example-generic" data-slide-to="0" class="active">
<div class="thumbnail">
<img src="http://www.fillmurray.com/800/400" class="img-responsive">
</div>
</li>
<li data-target="#carousel-example-generic" data-slide-to="1">
<div class="thumbnail">
<img src="http://www.fillmurray.com/800/401" class="img-responsive">
</div>
</li>
<li data-target="#carousel-example-generic" data-slide-to="2">
<div class="thumbnail">
<img src="http://www.fillmurray.com/800/402" class="img-responsive">
</div>
</li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">
<div class="item active">
<img src="http://www.fillmurray.com/800/400" width="800" height="400">
<div class="carousel-caption">
Slide 1
</div>
</div>
<div class="item">
<img src="http://www.fillmurray.com/800/401" width="800" height="400">
<div class="carousel-caption">
Slide 2
</div>
</div>
<div class="item">
<img src="http://www.fillmurray.com/800/402" width="800" height="400">
<div class="carousel-caption">
Slide 3
</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>
</div>
</div>
</div>
您好,我正在尝试制作一个 bootstrap3 旋转木马滑块,我想添加一些图像作为幻灯片指示器而不是列表默认圆圈。
Html 标记:
<div id="carousel-slider" class="carousel slide" data-ride="carousel" data-interval="5000">
<!-- Slider Indicators -->
<ul class="carousel-indicators">
<li data-target="#carousel-slider" data-slide-to="0" class="active"></li>
<li data-target="#carousel-slider" data-slide-to="1"></li>
<li data-target="#carousel-slider" data-slide-to="2"></li>
</ul><!--/ Indicators end-->
</div>
如果我添加如下 img 标签:
<div id="carousel-slider" class="carousel slide" data-ride="carousel" data-interval="5000">
<!-- Slider Indicators -->
<ul class="carousel-indicators">
<li data-target="#carousel-slider" data-slide-to="0" class="active">
<div class="thumbnail">
<img class="img-responsive" src="https://s3.amazonaws.com/ooomf-com-files/wdXqHcTwSTmLuKOGz92L_Landscape.jpg">
</div></li>
<li data-target="#carousel-slider" data-slide-to="1"></li>
<li data-target="#carousel-slider" data-slide-to="2"></li>
</ul><!--/ Indicators end-->
<div>
它没有显示任何内容。如何实现添加图像作为指示器而不是
我认为最重要的是覆盖 .carousel-indicators
.
li
标签的 width
和 height
属性
为此,我创建了一个名为 .carousel-indicators--thumbnails
的附加修饰符 css class,并将其添加到 .carousel-indicators
div
。此修饰符 class 用于覆盖 li
、.active
和 .active .thumbnail
class.
.carousel-indicators.carousel-indicators--thumbnails li {
width: 80px;
height: 40px;
margin: 0;
border: none;
border-radius: 0;
}
.carousel-indicators.carousel-indicators--thumbnails .active {
background-color: transparent;
}
.carousel-indicators.carousel-indicators--thumbnails .active .thumbnail {
border-color: #337ab7;
}
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet" />
<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
<div class="container">
<div class="row">
<div class="col-xs-12 col-md-8 col-md-offset-2">
<div id="carousel-example-generic" class="carousel slide" data-ride="carousel" data-interval="5000">
<!-- Indicators -->
<ol class="carousel-indicators carousel-indicators--thumbnails">
<li data-target="#carousel-example-generic" data-slide-to="0" class="active">
<div class="thumbnail">
<img src="http://www.fillmurray.com/800/400" class="img-responsive">
</div>
</li>
<li data-target="#carousel-example-generic" data-slide-to="1">
<div class="thumbnail">
<img src="http://www.fillmurray.com/800/401" class="img-responsive">
</div>
</li>
<li data-target="#carousel-example-generic" data-slide-to="2">
<div class="thumbnail">
<img src="http://www.fillmurray.com/800/402" class="img-responsive">
</div>
</li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">
<div class="item active">
<img src="http://www.fillmurray.com/800/400" width="800" height="400">
<div class="carousel-caption">
Slide 1
</div>
</div>
<div class="item">
<img src="http://www.fillmurray.com/800/401" width="800" height="400">
<div class="carousel-caption">
Slide 2
</div>
</div>
<div class="item">
<img src="http://www.fillmurray.com/800/402" width="800" height="400">
<div class="carousel-caption">
Slide 3
</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>
</div>
</div>
</div>