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事件，請不要做任何事情。