Bootstrap 4的走马灯不起作用

5
我在使用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>

提前感谢您!


1
你的问题中与mysql标签有什么关系? - r0xette
4个回答

6
我看到两个主要问题:
首先,您似乎缺少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文档:
将我们的JavaScript插件、jQuery和Tether添加到页面末尾,就在结束标签之前。请确保首先放置jQuery和Tether,因为我们的代码依赖它们。
在标签中,按顺序加载:
1.(CDN)Twitter Bootstrap 2.(本地)bootstrap.js(我猜是指Twitter Bootstrap) 3.(CDN)jQuery 2.1.4
在标签底部,按顺序加载:
1.(CDN)jQuery 3.1.1 2.(本地)jQuery(仅当CDN未成功响应时) 3.(CDN)Tether 4.(本地)Holder 5.(本地)Twitter Bootstrap 6.IE10视口错误解决方法
基本上,删除中的

看起来这个答案和另一个答案都使用了"#myCarousel"作为jQuery选择器,但实际上在示例代码中并不是这样称呼的。它被称为"carouselExampleIndicators"。对于未来的谷歌搜索者,请确保它们匹配。 - Source Matters

2

看起来您可能错放了一些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>


0

当我在使用Bootstrap 4的轮播时,我遇到了同样的问题。

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

这里是解决方案,只需将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>

以下链接可能会对您有所帮助。

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


0

对于任何试图将Bootstrap轮播添加到React项目中的人。

前往public文件夹中的index.html文件。

然后添加以下内容。

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文,
原文链接