Question

我为旋转木马编写了以下代码。第一个问题是我无法找到带有旋转木马的幻灯片类，请告诉我它在哪里出现。其次，它正确显示第一张图像，但之后没有滑动。最后，滑动字形也不起作用。

<div class="row" id="carosal-row">
    <div id="carousal" class="carousel slide col-md-offset-3 col-md-9" data-ride="carousel" data-interval="3000" data-wrap="true" data-pause="hover">
        <ol class="carousel-indicators">
            <li data-target="#carousel" data-slide-to="0" class="active"></li>
            <li data-target="#carousel" data-slide-to="1"></li>
            <li data-target="#carousel" data-slide-to="2"></li>
            <li data-target="#carousel" data-slide-to="3"></li>
        </ol>

        <div class="carousel-inner" role="listbox">
            <div class="item active">
                <img src="images/dog1.jpg" alt="Doggy" />
                <div class="carousel-caption">
                    ...
                </div>
            </div>

            <div class="item">
                <img src="images/cat.jpg" alt="caty" />
                <div class="carousel-caption">
                    ...
                </div>
            </div>

            <div class="item">
                <img src="images/parrots.jpg" alt="caty" />
                <div class="carousel-caption">
                    ...
                </div>
            </div>

            <div class="item">
                <img src="images/dog2.png" alt="caty" />
                <div class="carousel-caption">
                    ...
                </div>
            </div>

        </div>

        <a class="left carousel-control" href="#carousel" 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" role="button" data-slide="next">
            <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
            <span class="sr-only">Next</span>
        </a>
    </div>
</div>

我的代码是对的还是我错过了什么？

Answer 1

多次播放时轮播拼写错误。 Here是您的代码的小提琴，似乎有用。你导入了bootstrap吗？

改变了图像：

<div class="row" id="carosal-row">
    <div id="carousal" class="carousel slide col-md-offset-3 col-md-9" data-ride="carousel" data-interval="3000" data-wrap="true" data-pause="hover">
        <ol class="carousel-indicators">
            <li data-target="#carousel" data-slide-to="0" class="active"></li>
            <li data-target="#carousel" data-slide-to="1"></li>
            <li data-target="#carousel" data-slide-to="2"></li>
            <li data-target="#carousel" data-slide-to="3"></li>
        </ol>

        <div class="carousel-inner" role="listbox">
            <div class="item active">
                <img src="http://upload.wikimedia.org/wikipedia/commons/7/7f/Terrestrial_planets_size_comparison.png" alt="Doggy" />
                <div class="carousel-caption">
                    ...
                </div>
            </div>

            <div class="item">
                <img src="http://upload.wikimedia.org/wikipedia/commons/3/3e/1e7m_comparison_Uranus_Neptune_Sirius_B_Earth_Venus.png" alt="caty" />
                <div class="carousel-caption">
                    ...
                </div>
            </div>

            <div class="item">
                <img src="http://upload.wikimedia.org/wikipedia/commons/9/9b/Planets_everywhere_(artist%E2%80%99s_impression).jpg" alt="caty" />
                <div class="carousel-caption">
                    ...
                </div>
            </div>

            <div class="item">
                <img src="http://upload.wikimedia.org/wikipedia/commons/9/97/The_Earth_seen_from_Apollo_17.jpg" alt="caty" />
                <div class="carousel-caption">
                    ...
                </div>
            </div>

        </div>

        <a class="left carousel-control" href="#carousel" 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" role="button" data-slide="next">
            <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
            <span class="sr-only">Next</span>
        </a>
    </div>
</div>

Answer 2

我的jQuery版本出现问题。我已经安装了jQuery v1.1.9并且bootstrap v3.3.1不支持它。这就是幻灯片课也失踪的原因。现在我更新了我的jQuery版本ti v2.1.3 bootstrap v3.3.1可以正常工作。所以问题就解决了。

转盘无法正常工作

2 个答案: