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

Question

I am learning bootstrap carousels. But when I load the page into Firefox 72 / chromium / falkon but the interval doesn't work inside $( document ).ready(...), $(() = {...}), but successfully works without them.

Code

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

This code has 2 images called a.jpg and b.jpg, which shows up correctly. But if I put comment out the $(document).ready() the code works fine (changes from one image to other without sliding), although my instructor's code works fine within the $() JQuery function!

Why doesn't the sliding interval works inside JQuery?

can you try `$(document).on('your_action', 'your_id_or_class', function() {"your code goes here"})` — HexaCrop, Dec 11 '19 at 07:22
If I use `$( document ).on('mouseover', '#myCarousel', () => {...}` for test, after reloading the page, it sometimes activates on mouseover, and sometimes doesn't, the `widow.console.log('hi')` is working fine... — 15 Volts, Dec 11 '19 at 07:27
It works outside document.ready, but my instructor is showing it should be in document.ready()! The instructor has 10000ms delay, and it's not well tested though... I am using 100ms delay just to test it works, but it doesn't work for some reason! — 15 Volts, Dec 11 '19 at 07:31
@S.Goswami, I have updated your code. Please check and let me know. — Revti Shah, Dec 11 '19 at 09:52

Revti Shah · Accepted Answer · 2019-12-12T05:40:22.943

Here is the code. Hope it will work for you.If any changes let me know. Just Add slide class to the carousel. Sliding works fine as well as interval also.

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

IDK why the 5000ms delay when changed to something else like 500 or 50, it doesn't work (tried chromium 79 and firefox 72), but again, it works when you remove the `$( document ).ready(...)` and just use the bare code inside `ready()` — 15 Volts, Dec 11 '19 at 11:15
Nope, the interval doesn't work, neither the sliding animation (it should have an animation). Probably it's too out of date and broken? Also, new bootstrap 4 is terribly backwards incompatible, and it's hard to follow the tutorial I am watching!... Any ideas? — 15 Volts, Dec 11 '19 at 11:21
@S.Goswami, Actually You used bootstrap 3. 0. Then how can you say about bootstrap 4? — Revti Shah, Dec 11 '19 at 11:42
I am using bootstrap 3 with JQuery 3.4.1. When bootstrap 3 was released the JQuery version was different. I am not sure if those JQuery versions are compatible... Also, the video series I am watching is from 2015! The browsers back then was different as well... That's the reason behind saying if that's an issue caused by Bootstrap3... — 15 Volts, Dec 11 '19 at 15:34
Let us [continue this discussion in chat](https://chat.stackoverflow.com/rooms/204096/discussion-between-revti-shah-and-s-goswami). — Revti Shah, Dec 12 '19 at 04:45

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

Code

1 Answers1