Bootstrap Carousel：禁用指标

Question

如何使移动设备上的轮播指示器无法点击？ 因此，当我在移动设备上点击它们时，幻灯片不会改变。

我正在使用最新的bootstrap。

Answer 1

让我们改变小屏幕标准示例的外观。

---

1.指标可以隐藏

将class hidden-xs添加到<ol class="carousel-indicators"> 。

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

---

2.指示灯可以关闭

添加此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> 

---

3.指示器可放置在转盘下方

添加此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> 

Answer 2

移动设备注册touch事件。

因此，在您的点击处理程序中，您可以区分mouse和touch事件。

如果是touch事件，请不要做任何事情。