javascript - 旋转木马 Bootstrap 4 不工作

标签 javascript jquery html twitter-bootstrap

我在 bootstrap 4 上遇到了轮播模块的问题。 我已经进行了很长时间的故障排除，但我一无所获，所以我只是想在这里尝试一下，希望你们能帮助我!

(我已经查看了关于这个主题的其他帖子，但到目前为止运气不好)

废话少说，代码如下:

!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>

提前致谢!

最佳答案

我看到两个主要问题:

首先，您似乎缺少 bootstrap CSS 类。将其添加到您的 <head>元素:

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

根据 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.

在<head>标记，您正在按顺序加载，

  1. (CDN)推特 Bootstrap
  2. (本地)bootstrap.js(我猜是指 Twitter Bootstrap)，
  3. (CDN)jQuery 2.1.4

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

  1. (CDN)jQuery 3.1.1
  2. (本地)jQuery(仅当 CDN 未成功响应时)
  3. (CDN)系绳
  4. (本地)持有人
  5. (本地)Twitter Bootstrap
  6. 解决 IE10 视口(viewport)错误

基本上，删除 <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-rwoIResjU2yc3z8GV/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>

关于javascript - 旋转木马 Bootstrap 4 不工作，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/42302295/

上一篇：html - 如何将图像标签放入 Bootstrap 网格？

下一篇：javascript - 在鼠标悬停时显示复选框显示表格中的每个单元格

相关文章：

javascript - 在 html 标签中使用 javascript

javascript - 如何通过邮件退回尸体？ MailApp.sendEmail() 错误

javascript - jQuery 将参数发送到 Rails 应用程序以保存在数据库中

css - 在 div 中时，表单字段在 firefox 上不起作用

jquery - 使用 jQueryscrollTop 时消除抖动

javascript - 关于 JQuery 设计的困惑

html - 仅为居中主体设置背景颜色属性

javascript - 回发后运行 javascript 函数

javascript - 带有附加参数的django dajaxice javascript回调

javascript - 使用 Angular JS $route 创建简单的 SPA 时遇到问题？

©2024 IT工具网  联系我们