twitter-bootstrap 轮播引导程序 4 不工作

Question

提问by Lars Mulder

I've run into a problem with the carousel module on bootstrap 4. I've been troubleshooting for a long time but I'm getting nowhere so I'm just gonna try and ask here, I hope you guys can help me!

我在 bootstrap 4 上遇到了 carousel 模块的问题。我已经排查了很长时间，但我无处可去，所以我只是想在这里问一下，我希望你们能帮助我！

(I already checked out other posts on this topic but no luck so far)

（我已经查看了有关此主题的其他帖子，但到目前为止还没有运气）

Without further ado, here's the code:

闲话少说，代码如下：

!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta name="description" content="">
    <meta name="author" content="">
    <link rel="icon" href="../../favicon.ico">
    <link rel="stylesheet" href="css/font-awesome.min.css">
    <link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet">
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js"></script>
    <script scr="/js/bootstrap.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
    <script>
    $(document).ready(function() {
    $('#myCarousel').carousel({
    //options here
    });
});
    </script>

<body>

 <div class="container">
    <div id="carouselExampleIndicators" class="carousel slide span12" data-ride="carousel">
        <div class="row">
            <ol class="carousel-indicators">
                <li data-target="#carouselExampleIndicators" data-slide-to="0" class="active" ></li>
                <li data-target="#carouselExampleIndicators1" data-slide-to="1"></li>
                <li data-target="#carouselExampleIndicators2" data-slide-to="2"></li>
            </ol>
        </div>
        <div class="row">
            <div class="carousel-inner" role="listbox">
                <div class="carousel-item active">
                <img class="d-block img-fluid" src="sfeer-kok-groente-snijden_5.jpg" alt="First slide">
                </div>
              <div class="carousel-item">
                    <img class="d-block img-fluid" src="img/diamond.png" alt="Second slide">
                </div>
                <div class="carousel-item">
                    <img class="d-block img-fluid" src="#" alt="Third slide">
                </div>
            </div>
        </div>
    </div>
    </div>

<!-- Bootstrap core JavaScript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="https://code.jquery.com/jquery-3.1.1.slim.min.js"
        integrity="sha384-A7FZj7v+d/sdmMqp/nOQwliLvUsJfDHW+k9Omg/a/EheAdgtzNs3hpfag6Ed950n"
        crossorigin="anonymous"></script>
<script>window.jQuery || document.write('<script src="../../assets/js/vendor/jquery.min.js"><\/script>')</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js"
        integrity="sha384-DztdAPBWPRXSA/3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb"
        crossorigin="anonymous"></script>
<script src="../../assets/js/vendor/holder.min.js"></script>
<script>
    $(function () {
        Holder.addTheme("thumb", {background: "#55595c", foreground: "#eceeef", text: "Thumbnail"});
    });
</script>
<script src="/js/bootstrap.min.js"></script>
<!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
<script src="../../assets/js/ie10-viewport-bug-workaround.js"></script>

</body>
</html>

Thank you in advance!

先感谢您！

Answer 1

回答by Chris Forrence

I see two main problems:

我看到两个主要问题：

First, you seem to be missing the bootstrap CSS class. Add it in your <head>element:

首先，您似乎缺少引导 CSS 类。将其添加到您的<head>元素中：

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwtheitroadesjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">

According to the Bootstrap documentation:

根据 Bootstrap 文档：

Add our JavaScript plugins, jQuery, and Tether near the end of your pages, right before the closing tag. Be sure to place jQuery and Tether first, as our code depends on them.

将我们的 JavaScript 插件、jQuery 和 Tether 添加到页面末尾附近，就在结束标记之前。确保首先放置 jQuery 和 Tether，因为我们的代码依赖于它们。

In the <head>tag, you're loading, in order,

在<head>标签中，您按顺序加载，

(CDN) Twitter Bootstrap
(Local) bootstrap.js (which I'm guessing refers to Twitter Bootstrap),
(CDN) jQuery 2.1.4

(CDN) Twitter 引导程序
（本地）bootstrap.js（我猜是指 Twitter Bootstrap），
(CDN) jQuery 2.1.4

At the bottom of the <body>tag, you're loading, in order,

在<body>标签的底部，您正在按顺序加载，

(CDN) jQuery 3.1.1
(Local) jQuery (only if the CDN didn't respond successfully)
(CDN) Tether
(Local) Holder
(Local) Twitter Bootstrap
An IE10 viewport bug workaround

(CDN) jQuery 3.1.1
（本地）jQuery（仅当 CDN 未成功响应时）
(CDN) 系绳
（本地）持有人
(本地) Twitter Bootstrap
IE10 视口错误解决方法

Essentially, remove the <script>lines in the <head>, moving the carousel instantiation to the bottom. Your code will look similar to below:

本质上，删除中的<script>行<head>，将轮播实例移动到底部。您的代码将类似于以下内容：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta name="description" content="">
    <meta name="author" content="">
    <link rel="icon" href="../../favicon.ico">
    <link rel="stylesheet" href="css/font-awesome.min.css">
    <link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwtheitroadesjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">
</head>

<body>
    <div class="container">
        <div id="carouselExampleIndicators" class="carousel slide span12" data-ride="carousel">
            <div class="row">
                <ol class="carousel-indicators">
                    <li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>
                    <li data-target="#carouselExampleIndicators1" data-slide-to="1"></li>
                    <li data-target="#carouselExampleIndicators2" data-slide-to="2"></li>
                </ol>
            </div>
            <div class="row">
                <div class="carousel-inner" role="listbox">
                    <div class="carousel-item active">
                        <img class="d-block img-fluid" src="sfeer-kok-groente-snijden_5.jpg" alt="First slide">
                    </div>
                    <div class="carousel-item">
                        <img class="d-block img-fluid" src="img/diamond.png" alt="Second slide">
                    </div>
                    <div class="carousel-item">
                        <img class="d-block img-fluid" src="#" alt="Third slide">
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- Bootstrap core JavaScript
    ================================================== -->
    <!-- Placed at the end of the document so the pages load faster -->
    <script src="https://code.jquery.com/jquery-3.1.1.slim.min.js" integrity="sha384-A7FZj7v+d/sdmMqp/nOQwliLvUsJfDHW+k9Omg/a/EheAdgtzNs3hpfag6Ed950n" crossorigin="anonymous"></script>
    <script>
    window.jQuery || document.write('<script src="../../assets/js/vendor/jquery.min.js"><\/script>')
    </script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js" integrity="sha384-DztdAPBWPRXSA/3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/holder/2.9.4/holder.min.js"></script>
    <script>
    $(function() {
        Holder.addTheme("thumb", {
            background: "#55595c",
            foreground: "#eceeef",
            text: "Thumbnail"
        });
        $('#myCarousel').carousel({
            // Options
        });
    });
    </script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous"></script>
    <!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
    <script src="../../assets/js/ie10-viewport-bug-workaround.js"></script>
</body>

</html>

Answer 2

回答by Vilas Kumkar

It seems that you might have misplaced some jQuery files and it is causing the issue, try to follow this way

看来您可能放错了一些 jQuery 文件，这是导致问题的原因，请尝试按照这种方式进行操作

$('#myCarousel').carousel({});

<div class="container">
    <div id="carouselExampleIndicators" class="carousel slide span12" data-ride="carousel">
        <div class="row">
            <ol class="carousel-indicators">
                <li data-target="#carouselExampleIndicators" data-slide-to="0" class="active" ></li>
                <li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
                <li data-target="#carouselExampleIndicators" data-slide-to="2"></li>
            </ol>
        </div>
        <div class="row">
            <div class="carousel-inner" role="listbox">
                <div class="carousel-item active">
                <img class="d-block img-fluid" src="https://placeimg.com/640/480/any" alt="First slide">
                </div>
              <div class="carousel-item">
                    <img class="d-block img-fluid" src="https://placeimg.com/640/480/any" alt="Second slide">
                </div>
                <div class="carousel-item">
                    <img class="d-block img-fluid" src="https://placeimg.com/640/480/any" alt="Third slide">
                </div>
            </div>
        </div>
    </div>
    </div>
    
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/js/bootstrap.min.js"></script>

Answer 3

回答by Vivek Budithi

While i was doing carousel in bootstrap 4, i was facing the same problem.

当我在 bootstrap 4 中做轮播时，我遇到了同样的问题。

I can see that you have mentioned <ol class ="carousel-indicators">

我可以看到你提到了 <ol class ="carousel-indicators">

Here is the solution, just by changing ol to ul, you get the carousel ouput and rest all remains same.

这是解决方案，只需将 ol 更改为 ul，即可获得轮播输出，其余部分保持不变。

<ul class="carousel-indicators"> <li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li> <li data-target="#carouselExampleIndicators1" data-slide-to="1"></li> <li data-target="#carouselExampleIndicators2" data-slide-to="2"></li> </ul>

This link below might help you

下面这个链接可能对你有帮助

https://www.w3schools.com/bootstrap4/tryit.asp?filename=trybs_carousel

twitter-bootstrap 轮播引导程序 4 不工作

提问by Lars Mulder

回答by Chris Forrence

回答by Vilas Kumkar

回答by Vivek Budithi

相关推荐

最近更新

标签

twitter-bootstrap 轮播引导程序 4 不工作

提问by Lars Mulder

回答by Chris Forrence

回答by Vilas Kumkar

回答by Vivek Budithi

相关推荐

twitter-bootstrap Bootstrap 3 中单元格的中心 ul

twitter-bootstrap bootstrap 4 样式选择

twitter-bootstrap Bootstrap 工具提示在初始悬停时处于错误位置，然后处于正确位置

twitter-bootstrap Bootstrap 导航栏品牌中的 SVG 标志

相关推荐

最近更新

标签