How to use the bootstrap carousel in a wordpress theme

Navigation
0

I made a simple theme in wordpress and I'm using this type 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 the functions.php looks 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, his grids system is working, but the carousel is not started and I get the error in the console: 

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

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

    
asked by anonymous 17.03.2018 / 16:36

1 answer

1

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

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

Because of this, your code will be executed only after page loading.

    
17.03.2018 / 23:51
How to synchronize my project with GitHub PYTHON - Value store, line by line, in txt