Bootstrap Carousel：禁用指示器 [英] Bootstrap Carousel: disable indicators
本文介绍了Bootstrap Carousel：禁用指示器的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
如何使轮播指标在移动设备上不可点击？这样，当我在移动设备上单击它们时，幻灯片就不会更改。
How to make carousel-indicators not clickable on mobile? So that when I click on them on mobile devices, slides don't change.
我正在使用最新的引导程序。
I am using latest bootstrap.
推荐答案
让我们更改标准示例的外观
Let's change the appearance of the standard example for small screens.
将类 hidden-xs 添加到< ol class =轮播指标> 。
@import url('https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css');
.carousel-inner > .item > img {
width: 100%;
}
<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<ol class="carousel-indicators hidden-xs">
<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" role="listbox">
<div class="item active">
<img class="img-responsive" src="http://placehold.it/600x200/c69/?text=%20" alt="Slide 1">
</div>
<div class="item">
<img class="img-responsive" src="http://placehold.it/600x200/69c/?text=%20" alt="Slide 2">
</div>
<div class="item">
<img class="img-responsive" src="http://placehold.it/600x200/9c6/?text=%20" alt="Slide 3">
</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 class="alert alert-danger hidden-xs text-center">
Width > 767px. Make the window narrower.
</div>
<div class="alert visible-xs text-center">
Width < 768px. Indicators are hidden.
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
添加此CSS：
@media (max-width: 767px) {
.carousel-indicators,
.carousel-indicators li {
cursor: default;
pointer-events: none;
}
}
@import url('https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css');
.carousel-inner > .item > img {
width: 100%;
}
@media (max-width: 767px) {
.carousel-indicators,
.carousel-indicators li {
cursor: default;
pointer-events: none;
}
}
<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" role="listbox">
<div class="item active">
<img class="img-responsive" src="http://placehold.it/600x200/c69/?text=%20" alt="Slide 1">
</div>
<div class="item">
<img class="img-responsive" src="http://placehold.it/600x200/69c/?text=%20" alt="Slide 2">
</div>
<div class="item">
<img class="img-responsive" src="http://placehold.it/600x200/9c6/?text=%20" alt="Slide 3">
</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 class="alert alert-danger hidden-xs text-center">
Width > 767px. Make the window narrower.
</div>
<div class="alert visible-xs text-center">
Width < 768px. Indicators are turned off.
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
添加此CSS：
@media (max-width: 767px) {
.carousel {
margin-bottom: 7%;
}
.carousel-indicators {
bottom: auto;
top: 105%;
}
.carousel-indicators li {
border-color: #666;
}
.carousel-indicators .active {
background-color: #666;
}
}
@import url('https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css');
.carousel-inner > .item > img {
width: 100%;
}
@media (max-width: 767px) {
.carousel {
margin-bottom: 7%;
}
.carousel-indicators {
bottom: auto;
top: 105%;
}
.carousel-indicators li {
border-color: #666;
}
.carousel-indicators .active {
background-color: #666;
}
}
<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" role="listbox">
<div class="item active">
<img class="img-responsive" src="http://placehold.it/600x200/c69/?text=%20" alt="Slide 1">
</div>
<div class="item">
<img class="img-responsive" src="http://placehold.it/600x200/69c/?text=%20" alt="Slide 2">
</div>
<div class="item">
<img class="img-responsive" src="http://placehold.it/600x200/9c6/?text=%20" alt="Slide 3">
</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 class="alert alert-danger hidden-xs text-center">
Width > 767px. Make the window narrower.
</div>
<div class="alert visible-xs text-center">
Width < 768px. Indicators are placed below the carousel.
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
这篇关于Bootstrap Carousel：禁用指示器的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
