twitter-bootstrap 如何删除或自定义 Bootstrap 轮播中的分页按钮

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/21973298/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-10-21 20:08:13  来源:igfitidea点击:

How to remove or customize the pagination button in Bootstrap carousel

twitter-bootstraptwitter-bootstrap-3carousel

提问by Asme Just

I'd like to remove the default button (or white dot) in Bootstrap carousel. Is it possible to customize them?

我想删除 Bootstrap 轮播中的默认按钮(或白点)。是否可以自定义它们?

enter image description here

在此处输入图片说明

回答by Gavin Ching

In terms of hiding, you can use CSS to make it hidden. For example,

在隐藏方面,您可以使用 CSS 将其隐藏。例如,

.carousel-indicators li { visibility: hidden; }

would make all the dots be hidden.

会使所有的点都被隐藏起来。

回答by Dimitri Schultheis

I think the best way to write your own template and add it by template-url param. E.g.:

我认为最好的方法是编写自己的模板并通过 template-url 参数添加它。例如:

<div class="carousel-inner" ng-transclude></div>
<a role="button" 
   href 
   class="left carousel-control" 
   ng-click="prev()" 
   ng-class="{ disabled: isPrevDisabled() }" 
   ng-show="slides.length > 1">
    <span aria-hidden="true" 
          class="glyphicon glyphicon-chevron-left"></span>
    <span class="sr-only">previous</span>
</a>
<a role="button" 
   href 
   class="right carousel-control" 
   ng-click="next()" 
   ng-class="{ disabled: isNextDisabled() }" 
   ng-show="slides.length > 1">
    <span aria-hidden="true" 
          class="glyphicon glyphicon-chevron-right"></span>
    <span class="sr-only">next</span>
</a>

回答by valex

Just remove indicatorspart from carousel declaration:

只需indicators从轮播声明中删除部分:

<!-- Indicators -->
<ol class="carousel-indicators">
  <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
  <li data-target="#myCarousel" data-slide-to="1"></li>
  <li data-target="#myCarousel" data-slide-to="2"></li>
  <li data-target="#myCarousel" data-slide-to="3"></li>
</ol>

回答by user3526416

The following worked for me

以下对我有用

  1. search for .carousel-indicators liin the css file bootstrap.min.css

  2. change the displaysetting for the carousel-indicators lito none

  1. 在 css 文件 bootstrap.min.css 中搜索.carousel-indicators li

  2. carousel-indicators li显示设置更改为none

example:

例子:

from this .carousel-indicators li{display:inline-block;}

由此 .carousel-indicators li{display:inline-block;}

to this .carousel-indicators li{display:none;}

对此 .carousel-indicators li{display:none;}

The dots will no longer be displayed.

点将不再显示。

回答by Seth McClaine

1) prevent from switching

1) 防止切换

$('.carousel-indicators li').each(function(){
    $(this).carousel('pause');
});

2) remove the active class..

2)删除活动类..

$('.carousel-indicators .active').removeClass('active')