Интервал начальной загрузки карусели внутри JQuery $ (document) .ready () не работает - PullRequest
Новая
       73

Интервал начальной загрузки карусели внутри JQuery $ (document) .ready () не работает

0 голосов
/ 11 декабря 2019

Я учу начальные карусели. Но когда я загружаю страницу в Firefox 72 / хром / фалькон, но интервал не работает внутри $( 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?

1 Ответ

2 голосов
/ 11 декабря 2019

Вот код. Надеюсь, это сработает для вас. Если какие-либо изменения, дайте мне знать. Просто добавьте слайд класс в карусель. Скольжение работает хорошо, а также интервал. 

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