【问题标题】:Sliding images in Bootstrap's Carousel next to eachother在 Bootstrap Carousel 中滑动图像并排
【发布时间】:2012-02-08 18:51:37
【问题描述】:

请看this link中的轮播。

有没有一种方法可以改变 Twitter Bootstrap 的轮播代码以使图像正确滑动,而不是像现在这样乱七八糟?

【问题讨论】:

  • 你能具体说明一下目前有什么问题吗?
  • 这个网站在 16:9 显示器上看起来真的很乱,你应该解决这个问题,我会开始你:#primary {background-color: white; height: 473px; width: 1000px; overflow: hidden;}

标签: javascript jquery css twitter-bootstrap


【解决方案1】:

尝试添加到包含类名为“carousel”的轮播的外部 div,额外的类名:“slide”。

你会得到一个滑动轮播:

<div id="myCarousel" 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>

【讨论】:

    【解决方案2】:

    我查看了您的代码,您的所有图像都包含在 &lt;div class="item"&gt;...&lt;/div&gt; 中,这是正确的。但是,其中之一必须设置为 active,因此您需要将其中之一设置为 &lt;div class="item active"&gt;

    【讨论】:

    • 其中一个通过 jQuery 代码激活,如下所示:$('.item:first').addClass('active');
    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 2014-01-06
    • 2014-01-09
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多