Bootstrap JQuery $(document).ready() 内的轮播间隔不工作

Question

我正在学习 bootstrap 轮播。但是，当我将页面加载到 Firefox 72 / chromium / falkon 中时，间隔在 $( document ).ready(...)、$(() = {...}) 中不起作用，但没有它们也能正常工作。

代码

<!Doctype HTML>

<html>
    <head>
        <meta charset="utf-8"/>
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>Carousels</title>

        <script src="js/jquery-3.4.1.min.js"></script>
        <script src="bootstrap-3.3.4-dist/js/bootstrap.min.js"></script>
        <link rel="stylesheet" href="bootstrap-3.3.4-dist/css/bootstrap.min.css">
    </head>

    <body>
        <div class="container-fluid">
            <div class="carousel slide" id="myCarousel" data-ride="carousel">
                <ol class="carousel-indicators">
                    <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
                    <li data-target="#myCarousel" data-slide-to="1"></li>
                    <li data-target="#myCarousel" data-slide-to="2"></li>
                </ol>

                <div class="carousel-inner">
                    <div class="item active">
                        <img src="images/a.jpg"/>
                        <div class="carousel-caption">First Slide</div>
                    </div>

                    <div class="item">
                        <img src="images/b.jpg"/>
                        <div class="carousel-caption">Second Slide</div>
                    </div>

                    <div class="item">
                        <img src="images/a.jpg"/>
                        <div class="carousel-caption">Third Slide</div>
                    </div>
                </div>

                <a class="left carousel-control" href="#myCarousel" data-slide="prev">
                    <span class="glyphicon glyphicon-chevron-left"></span>
                    <span class="sr-only">Previous</span>
                </a>

                <a class="right carousel-control" href="#myCarousel" data-slide="next">
                    <span class="glyphicon glyphicon-chevron-right"></span>
                    <span class="sr-only">Next</span>
                </a>
            </div>
        </div>

        <script>
            $( document ).ready(() => {
                // works
                window.console.log('hi')

                // Doesn't work
                $('.carousel').carousel({
                    interval: 100
                })
            })
        </script>
    </body>
</html>

此代码有 2 个图像，分别为 a.jpg 和 b.jpg，它们正确显示。但是，如果我把 $(document).ready() 注释掉，代码就可以正常工作（从一个图像更改为另一个图像而不滑动），尽管我的讲师的代码在 $() JQuery 函数中工作正常！

为什么滑动间隔在 JQuery 内不起作用？

Answer 1

这是代码。希望它适用于 you.If 任何更改让我知道。只需将 slide class 添加到轮播。滑动和间隔也可以正常工作。

<!Doctype HTML>

<html>
    <head>
        <meta charset="utf-8"/>
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>Carousels</title>

        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
    </head>

    <body>
        <div class="container-fluid">
            <div class="carousel slide" id="myCarousel" data-ride="carousel">
                <ol class="carousel-indicators">
                    <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
                    <li data-target="#myCarousel" data-slide-to="1"></li>
                    <li data-target="#myCarousel" data-slide-to="2"></li>
                </ol>

                <div class="carousel-inner">
                    <div class="item active">
                        <img src="https://dummyimage.com/600x400/000/fff"/>
                        <div class="carousel-caption">First Slide</div>
                    </div>

                    <div class="item">
                        <img src="https://dummyimage.com/600x400/ff00ff/fff"/>
                        <div class="carousel-caption">Second Slide</div>
                    </div>

                    <div class="item">
                        <img src="https://dummyimage.com/600x400/0033ff/fff"/>
                        <div class="carousel-caption">Third Slide</div>
                    </div>
                </div>

                <a class="left carousel-control" href="#myCarousel" data-slide="prev">
                    <span class="glyphicon glyphicon-chevron-left"></span>
                    <span class="sr-only">Previous</span>
                </a>

                <a class="right carousel-control" href="#myCarousel" data-slide="next">
                    <span class="glyphicon glyphicon-chevron-right"></span>
                    <span class="sr-only">Next</span>
                </a>
            </div>
        </div>

      <!-- jQuery library -->
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

  <!-- Latest compiled JavaScript -->
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
        <script>
           
                // It will work
                $('.carousel').carousel({
                    interval: 5000
                });
           
        </script>
    </body>
</html>

Bootstrap JQuery $(document).ready() 内的轮播间隔不工作

Bootstrap carousel interval inside JQuery $(document).ready() isn't working

jquery

twitter-bootstrap-3

bootstrap-carousel

代码