How to use bootstrap Carousel in a wordpress theme

Question

I made a simple theme in wordpress and am using this kind of js:

(function($) {

    console.log("teste");
    $('.carousel').carousel();

})(jQuery);

and this html:

<div id="carousel1" class="carousel slide" data-ride="carousel">
    <div class="carousel-inner">
        <a class="carousel-control-prev" href="#carousel1" role="button" data-slide="prev">
            <span class="carousel-control-prev-icon" aria-hidden="true"></span>
            <span class="sr-only">Previous</span>
        </a>
        <a class="carousel-control-next" href="#carousel1" role="button" data-slide="next">
            <span class="carousel-control-next-icon" aria-hidden="true"></span>
            <span class="sr-only">Next</span>
        </a>
    </div>
</div>

and functions.php is like this:

  wp_enqueue_script('jquery', 'https://code.jquery.com/jquery-3.2.1.min.js'); 
  wp_enqueue_script('popper', 'https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.3/umd/popper.min.js');

  wp_enqueue_style('bootstrap', 'https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css');
  wp_enqueue_script('bootstrap', 'https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js'); 

In the functions.php of the theme Bootstrap is included and working, its grids system is working, only Carousel is not started and I get the error in the console:

Uncaught TypeError: $(...).carousel is not a function

I also checked the sources tab of Chrome and gave a CTRL+P and I can see bootrap.min.js

Answer 1

This happens because the function is running right after it is created (even before the script of Bootstrap be - fully - loaded). The ideal is to use

jQuery.ready(function($) {
    console.log("teste");
    $('.carousel').carousel();
})

Because that way, your code will run only after page loading.