程序员经验分享-hwhale

Bootstrap Carousel：禁用指示器

2023-12-22

如何使轮播指示器在移动设备上不可点击？这样，当我在移动设备上单击它们时，幻灯片不会发生变化。

我正在使用最新的引导程序。


让我们改变一下外观标准示例 http://getbootstrap.com/javascript/#carousel-examples对于小屏幕。

1. 指标可以隐藏

添加班级hidden-xs to <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>
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)

javascript

css

twitterbootstrap

carousel

Bootstrap Carousel：禁用指示器 的相关文章

  • 为什么我的箭头函数有原型属性？

    正如文档中提到的https developer mozilla org en docs Web JavaScript Reference Functions Arrow functions https developer mozilla o

  • 如何使用 console.log 省略文件/行号

    如今 您可以在 Chrome 的控制台中编写非常好的东西 查看this https developer chrome com devtools docs tips and tricks关联 我也做了一个截图 正如您在屏幕截图中看到的那样 文

  • 获取 pdf 第 1 页（共 2 页）的图像

    我正在使用 html2canvas 和 jsPDF 以及 Angular4 创建图像 我想将此图像放置在 2 页生成的 pdf 的第 1 页上 但似乎这条线 doc save test pdf 需要在函数内部htm2canvas 因为如果我

  • 将 javascript 放在 header 之外有多糟糕？

    这个问题几乎已经说明了一切 我开始添加一些功能到我的周末项目 http www my clock net 对于我和几个朋友来说 这是一个小应用程序 因为我们是交换生 所以它对我们来说有点有用 但事情是这样的 我在 php 中执行此操作并使用

  • 电子邮件 CSS 模板框架？

    任何人都知道任何电子邮件模板 CSS 框架 我目前正在使用引导程序 它可以工作 但不完全是为电子邮件而构建的 我看过 zurb ink 但它似乎对开发人员不太友好 很难让它发挥作用 其他人在那里使用什么 查看MJML https mjml

  • 从对象获取数据 - 我看到数据但无法保存它们

    正如你所看到的 我是新来的 我确实尝试过搜索 但没有找到解决我问题的方法 所以这是我的问题 如果我这样做 console log grid data kendoGrid data 这在控制台中显示如下 所以我明白这一点 有一个数组和一个带有

  • toJSON() 和 JSON.Stringify() 之间的区别

    如果您需要读取或克隆模型的所有数据属性 请使用其 toJSON 方法 此方法返回属性的副本作为 对象 尽管有其名称 但不是 JSON 字符串 当 JSON stringify 为 使用 toJSON 方法传递一个对象 它将返回的字符串化 t

  • Javascript“命名空间”和 jQuery AJAX

    我正在使用此处列出的建议 http www odetocode com articles 473 aspx http www odetocode com articles 473 aspx 使用模拟的JavaScript AJAX网络聊天系

  • 它们是“相同的”吗？代码大战

    这是完整的问题描述 给定两个数组 a 和 b 编写一个函数 comp a b Clojure 中的 compSame a b 来检查这两个数组是否具有 相同 元素以及相同的重数 这里 相同 意味着 b 中的元素是 a 平方中的元素 无论顺序

  • 如何使用javascript从特定标签获取HTML文档中的所有textNode？

    如何在不使用xpath或treewalker的情况下从单个数组中的一组特定标签中获取所有textNodes blockquote em h4 h6 p IE不允许您使用xpath和treewalker 请帮助我 如果脚本仅适用于 IE 那就

  • bootstrap css中垂直对齐缩略图？

    我认为这应该很简单 但我就是无法让它发挥作用 在 ASP NET MVC 中 我有一个如下所示的项目列表 div class row div class span12 ul class thumbnails foreach var film

  • 用于图形操作的 Javascript 库

    有没有建议的 javascript 替代 pythonpygraph http code google com p python graph or NetworkX http networkx lanl gov 应该注意的是 可视化不是必需

  • 使用 htaccess 重写规则重定向后 CSS 未加载

    我有以下用户个人资料网址的简写 RewriteRule w profile php name of user 1 当我这样做时 该网站使用适当的 css 文件进行样式设置site com name of user 但当我这样做的时候却不是s

  • jQuery 单击附加元素不起作用

    我有一个数组 我正在从 Array 获取数据并在 jQuery Append to list 中使用它 但是当我单击列表项时 它只显示最后一个元素 var array 1 2 7 3 4 8 5 6 9 for var i 0 i lt a

  • 限制线的长度

    我正在尝试画一条代表 弹弓 的线 并且希望它具有最大拉伸长度 在 p5 中 我在位置和位置之间画了一条线 line posA x posA y posB x posB y posA 是鼠标 x 和 y posB 是画布上圆的位置 我想要做的

  • onClick 事件适用于触摸屏设备上的触摸吗？

    我用过onclick我的网站上的活动 但是 当我在谷歌浏览器的开发人员模式移动视图中打开它时 触摸使用鼠标单击的元素没有任何反应 所以我的问题是 我还必须添加吗ontouch事件连同onclick事件或 onClick 事件适用于所有触摸屏

  • Modernizr 未将类应用于 html 标签

    我目前正在构建一个网站 我需要使用 Modernizr 但由于某种原因 它没有将类应用到 html 标签 因为它应该 我的代码如下所示

  • .parents() 没有 jquery - 或 querySelectorAll 为父母[重复]

    这个问题在这里已经有答案了 可能的重复 使用 matchesSelector js 检查 event target parentElement https stackoverflow com questions 12977658 check

  • 用于生成多色文本的 jQuery 插件，该文本可在悬停时改变颜色

    我想为各种链接生成多色文本 并从预先指定的颜色数组中为各个字母随机分配颜色 当将鼠标悬停在带有文本的 div 上时 颜色会发生变化 我正在考虑一个 jQuery 插件 脚本将是可行的方法 我想知道是否存在这样的插件或近似插件 Thanks

  • 在 Sublime Text 下获取完整的 JS 自动补全

    我刚刚在 Windows Vista 下安装了 Sublime Text 甚至遵循了中给出的建议这个帖子 https stackoverflow com questions 10636410 modifying sublime text 2

随机推荐

热门标签