Question

我在我的网页上放了一个旋转木马，左右两个按钮但是我很难弄清楚为什么按钮没有旋转旋转木马。

这是我的代码：

<!--Carousel Start-->
<div class="container">
<div class="col-md-12 text-center"><h3>Featured advertisements</h3></div>
<div class="col-md-12 col-md-12">
<div class="homeCarousel" id="featuredCarousel">
<div class="carousel-inner">
<div class="item active">
<div class="col-xs-3"><a href="#"><img src="http://placehold.it/500/e499e4/fff&amp;text=1" class="img-responsive"></a></div>
</div>
<div class="item">
            <div class="col-xs-3"><a href="#"><img src="http://placehold.it/500/e477e4/fff&amp;text=2" class="img-responsive"></a></div>
        </div>
<a class="left carousel-control" href="#featuredCarousel" data-slide="prev"><i class="glyphicon glyphicon-chevron-left"></i></a>
<a class="right carousel-control" href="#featuredCarousel" data-slide="next"><i class="glyphicon glyphicon-chevron-right"></i></a>

Answer 1

你的问题在这里

<div class="homeCarousel" id="featuredCarousel">

它应如下所示

<div class="homeCarousel carousel slide" id="featuredCarousel" data-ride="carousel">

假设您正在使用bootstrap中的标准轮播

Answer 2

您的代码缺少#featuredCarousel上的轮播类。此外，如果您想要滑动效果，还需要添加幻灯片类。

<!--Carousel Start-->
<div class="container">
    <div class="col-md-12 text-center"><h3>Featured advertisements</h3></div>
    <div class="col-md-12 col-md-12">
        <div class="homeCarousel carousel slide" data-ride="carousel" id="featuredCarousel">
            <div class="carousel-inner">
                <div class="item active">
                    <div class="col-xs-3"><a href="#"><img src="http://placehold.it/500/e499e4/fff&amp;text=1" class="img-responsive"></a></div>
                </div>
                <div class="item">
                    <div class="col-xs-3"><a href="#"><img src="http://placehold.it/500/e477e4/fff&amp;text=2" class="img-responsive"></a></div>
                </div>
                <a class="left carousel-control" href="#featuredCarousel" data-slide="prev"><i class="glyphicon glyphicon-chevron-left"></i></a>
                <a class="right carousel-control" href="#featuredCarousel" data-slide="next"><i class="glyphicon glyphicon-chevron-right"></i></a>
            </div>
        </div>
    </div>
</div>

JSfiddle - http://jsfiddle.net/z7rqe1qg/

检查bootstrap文档以获取更多设置。

在转盘的航海按钮

2 个答案: