是否可以在一页上有多个 Twitter Bootstrap 轮播? [英] Is it possible to have multiple Twitter Bootstrap carousels on one page?

查看：16
本文介绍了是否可以在一页上有多个 Twitter Bootstrap 轮播?的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

Twitter 引导程序版本: 2.0.3

示例 HTML 代码:

<html dir="ltr" lang="en-US" xmlns:og="http://opengraphprotocol.org/schema/"><头><link rel="stylesheet" type="text/css" media="all" href="reddlec/style.css"/><script type="text/javascript">$(document).ready(function() {$('.carousel').each(function(){$(this).carousel({暂停:真的，间隔:假});});});<script src="http://twitter.github.com/bootstrap/assets/js/jquery.js"></script><script src="http://twitter.github.com/bootstrap/assets/js/bootstrap-transition.js"></script><script src="http://twitter.github.com/bootstrap/assets/js/bootstrap-carousel.js"></script><身体><div id="carousel-1" class="轮播幻灯片"><!-- 轮播项目--><div class="carousel-inner"><div class="活动项目">...</div><div class="item">...</div><div class="item">...</div>

<!-- 轮播导航--><a class="carousel-control left" href="#myCarousel" data-slide="prev">&lsaquo;</a><a class="carousel-control right" href="#myCarousel" data-slide="next">&rsaquo;</a>

<div id="carousel-2" class="轮播幻灯片"><!-- 轮播项目--><div class="carousel-inner"><div class="活动项目">...</div><div class="item">...</div><div class="item">...</div>

<!-- 轮播导航--><a class="carousel-control left" href="#myCarousel" data-slide="prev">&lsaquo;</a><a class="carousel-control right" href="#myCarousel" data-slide="next">&rsaquo;</a>

示例 CSS: bootstrap.css

问题:要使两个引导轮播在一个页面上工作，基本上，我需要为其 div 容器设置两个不同的 ID(#carousel-1 和 #carousel-2).但我注意到除非我使用 #myCarousel 作为 div 容器的 ID，否则轮播不起作用.

在这种情况下，如何在一个页面上有多个轮播?

解决方案

更改轮播导航链接中的 href 以匹配您控制的轮播的 id 值.该 href 值是引导程序确定要滑动的方式.因此，您需要更改以下内容:

<a class="carousel-control left" href="#carousel-1" data-slide="prev">&lsaquo;</a><a class="carousel-control right" href="#carousel-1" data-slide="next">&rsaquo;</a>

对于第二个轮播:

<a class="carousel-control left" href="#carousel-2" data-slide="prev">&lsaquo;</a><a class="carousel-control right" href="#carousel-2" data-slide="next">&rsaquo;</a>

Twitter Bootstrap Version: 2.0.3

Example HTML code:

<!DOCTYPE html>
<html dir="ltr" lang="en-US" xmlns:og="http://opengraphprotocol.org/schema/">
<head>
<link rel="stylesheet" type="text/css" media="all" href="reddlec/style.css" />
<script type="text/javascript">
$(document).ready(function() {
    $('.carousel').each(function(){
        $(this).carousel({
            pause: true,
            interval: false
        });
    });
});​
</script>
<script src="http://twitter.github.com/bootstrap/assets/js/jquery.js"></script>
<script src="http://twitter.github.com/bootstrap/assets/js/bootstrap-transition.js"></script>
<script src="http://twitter.github.com/bootstrap/assets/js/bootstrap-carousel.js"></script>
</head>
<body>
<div id="carousel-1" class="carousel slide">
  <!-- Carousel items -->
  <div class="carousel-inner">
    <div class="active item">…</div>
    <div class="item">…</div>
    <div class="item">…</div>
  </div>
  <!-- Carousel nav -->
  <a class="carousel-control left" href="#myCarousel" data-slide="prev">&lsaquo;</a>
  <a class="carousel-control right" href="#myCarousel" data-slide="next">&rsaquo;</a>
</div>

<div id="carousel-2" class="carousel slide">
  <!-- Carousel items -->
  <div class="carousel-inner">
    <div class="active item">…</div>
    <div class="item">…</div>
    <div class="item">…</div>
  </div>
  <!-- Carousel nav -->
  <a class="carousel-control left" href="#myCarousel" data-slide="prev">&lsaquo;</a>
  <a class="carousel-control right" href="#myCarousel" data-slide="next">&rsaquo;</a>
</div>
</body>
</html>

Example CSS: bootstrap.css

Problem: For two bootstrap carousels to work on a page, basically, I need to set two different IDs for their div containers (#carousel-1 and #carousel-2). But I've noticed that the carousels do not work unless I use #myCarousel as the ID of the div container.

In that case, how can I have multiple carousels on a single page?

解决方案

Change the href in your carousel nav links to match the id value of the carousel you're controlling. That href value is how bootstrap determines which to slide. So you will need to change the following:

<a class="carousel-control left" href="#carousel-1" data-slide="prev">&lsaquo;</a>
<a class="carousel-control right" href="#carousel-1" data-slide="next">&rsaquo;</a>

And for the second carousel:

<a class="carousel-control left" href="#carousel-2" data-slide="prev">&lsaquo;</a>
<a class="carousel-control right" href="#carousel-2" data-slide="next">&rsaquo;</a>

这篇关于是否可以在一页上有多个 Twitter Bootstrap 轮播?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
前端开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆