Working Demo in Fiddle

Question

来自Bootstrap的旋转木马不会显示我的图像或对控件做出反应。

这是我的HTML：

<!DOCTYPE HTML>
<html>
    <head>
        <title>Skates R Us</title>
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <link rel="stylesheet" href="css/bootstrap.min.css">
        <link rel="stylesheet" href="css/global.css">
    </head>

    <body>
        <div class="navbar navbar-inverse navbar-fixed-top" role="navigation">
            <div class="container">
                <div class="navbar-header">
                    <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                        <span class="sr-only">Toggle navigation</span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                    </button>
                    <a href="#" class="navbar-brand">
                        Skates R Us
                    </a>
                </div>
                <div class="collapse navbar-collapse">
                    <ul class="nav navbar-nav">
                        <li class="active">
                            <a href="index.html">Home</a>
                        </li>
                        <li>
                            <a href="contact.html">Contact / About</a>
                        </li>
                        <li>
                            <a href="shop.html">Shop</a>
                        </li>
                        <li>
                            <a href="new.html">New Products</a>
                        </li>
                        <li>
                            <a href="media.html">Media</a>
                        </li>
                    </ul>
                </div>
            </div>
        </div>

        <div id="carousel" class="carousel slide" data-ride="carousel">
            <ol class="carousel-indicators">
                <li data-target="carousel" data-slide-to="0"></li>
                <li data-target="carousel" data-slide-to="1"></li>
                <li data-target="carousel" data-slide-to="2"></li>
            </ol>
            <div class="carousel-inner">
                <div class="item">
                    <img src="img/slide_1.png" alt="Slide 1">
                </div>
                <div class="item">
                    <img src="img/slide_2.png" alt="Slide 2">
                </div>
                <div class="item">
                    <img src="img/slide_3.png" alt="Slide 3">
                </div>
            </div>
            <a href="#carousel" class="left carousel-control" data-slide="prev">
                <span class="glyphicon glyphicon-chevron-left"></span>
            </a>
            <a href="#carousel" class="right carousel-control" data-slide="next">
                <span class="glyphicon glyphicon-chevron-right"></span>
            </a>
        </div>

        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
        <script src="js/bootstrap.min.js"></script>
        <script>
            $("#carousel").carousel();
        </script>
    </body>
</html>

我的CSS：

#carousel {

    margin-top: 50px;

}

.carousel {
    height: 500px;
    margin-bottom: 60px;
}
/* Since positioning the image, we need to help out the caption */
.carousel-caption {
    z-index: 10;
}

/* Declare heights because of positioning of img element */
.carousel .item {
    width: 100%;
    height: 500px;
    background-color: #777;
}
.carousel-inner > .item > img {
    position: absolute;
    top: 0;
    left: 0;
    min-width: 100%;
    height: 500px;
}

@media (min-width: 768px) {
    .carousel-caption p {
            margin-bottom: 20px;
            font-size: 21px;
            line-height: 1.4;
    }
}

img {
    background: red;
}

Chrome控制台中没有错误，代码与Bootstrap示例中的代码完全相同。

这就是网站在我看来的样子： Site

Answer 1

这里只有两件小事。

第一个是以下轮播指示器列表项目：

<li data-target="carousel" data-slide-to="0"></li>

您需要将data-target属性传递给选择器，这意味着ID必须以#为前缀。所以将它们更改为以下内容：

<li data-target="#carousel" data-slide-to="0"></li>

其次，您需要为轮播提供一个起点，因此轮播指示项和轮播内部项必须有一个active类。像这样：

<ol class="carousel-indicators">
    <li data-target="#carousel" data-slide-to="0" class="active"></li>
    <!-- Other Items -->
</ol>
<div class="carousel-inner">
    <div class="item active">
        <img src="https://picsum.photos/1500/600?image=1" alt="Slide 1" />
    </div>
    <!-- Other Items -->
</div>

Working Demo in Fiddle

Answer 2

以下是您需要完成的更改

只需使用以下代码

替换轮播div

你错过了＃＆＃39;＃＆＃39;对于data-target并为第一个项添加活动类

<div id="carousel" class="carousel slide" data-ride="carousel">
            <ol class="carousel-indicators">
                <li data-target="#carousel" data-slide-to="0"></li>
                <li data-target="#carousel" data-slide-to="1"></li>
                <li data-target="#carousel" data-slide-to="2"></li>
            </ol>
            <div class="carousel-inner">
                <div class="item active">
                    <img src="img/slide_1.png" alt="Slide 1">
                </div>
                <div class="item">
                    <img src="img/slide_2.png" alt="Slide 2">
                </div>
                <div class="item">
                    <img src="img/slide_3.png" alt="Slide 3">
                </div>
            </div>
            <a href="#carousel" class="left carousel-control" data-slide="prev">
                <span class="glyphicon glyphicon-chevron-left"></span>
            </a>
            <a href="#carousel" class="right carousel-control" data-slide="next">
                <span class="glyphicon glyphicon-chevron-right"></span>
            </a>
        </div>

Answer 3

好吧，Bootstrap Carousel有各种控制参数。

即。

间隔：指定每张幻灯片之间的延迟（以毫秒为单位）。

暂停：当鼠标指针进入旋转木马时，暂停旋转木马通过下一张幻灯片，并在鼠标指针离开旋转木马时恢复滑动。

wrap：指定轮播是否应连续浏览所有幻灯片，或在最后一张幻灯片处停止

供您参考：

更多详情，请click here...

希望这会对你有所帮助:)。

注意：这是为了进一步的帮助。我的意思是如何在加载轮播后自定义或更改默认行为。

Answer 4

最近，我在帮助一位朋友，以找出为什么他们的轮播无法正常工作的原因。控件将不起作用，图像也不会转换。我在一个曾经使用过的页面上有一个工作示例，并且我们遍历了所有代码，包括检查本文中的上述项目。我们将“优质”轮播粘贴到了同一页面上，并且仍然有效。现在，所有的css和bootstrap文件都相同。现在的代码是相同的，因此我们只能尝试使用图像。

因此，我们将图像替换为示例中的两个图像。有效。我们用最初不起作用的前两个图像替换了这两个图像，并且它起作用了。我们将每个图像（所有jpeg）一一添加回去，当我们到达第七张图像（18张）时，轮播失败。奇怪的。我们删除了这张图片，并继续添加剩余的图片，直到全部添加完毕并且轮播工作为止。

作为参考，我们在此站点上使用了jquery-3.3.1.slim.min.js和bootstrap / 4.3.1 / js / bootstrap.min.js。

我不知道为什么图像会或可能导致轮播发生故障，但确实如此。我在其他地方也找不到此原因的参考，因此我在此张贴为后人，希望它在其他解决方案失败时可能对其他人有所帮助。

使用有限的一组“已知为好”图像测试轮播。

Answer 5

对我来说，旋转木马没有在DreamWeaver CC中工作，只需提供＆＃34;模板中的代码即可。我正在玩的页面。我需要添加data-ride =＆＃34; carousel＆＃34;属性为carousel div，以便它开始工作。感谢Adarsh的代码片段突出显示了缺少的属性。

Bootstrap 3 Carousel不工作

5 个答案:

Working Demo in Fiddle