Carousel bootstrap sous symfony

Bonjour,

Je chereche à faire fonctionner un caroussel bootstrap sous symfony

Je pense avoir suivie correctement la procédure mais ça ne fonctionne pas.

Soit j'ai raté une étapes soit j'ai ma configuré mon code.

Voici mon code :

-Dans la balise head du fichier base.thml.twig

J'ai inclis les js dans cet ordre

  <link rel="stylesheet" href="{{asset('bootstrap/css/bootstrap.min.css')}}">

    <script src="{{asset('bootstrap/js/jquery-3.4.0.min.js')}}"></script>
    <script src="{{asset('bootstrap/js/popper.min.js')}}"></script>
    <script src="{{asset('bootstrap/js/bootstrap.min.js')}}"></script>

Et Voici mon code pour carousel :

{% extends 'base.html.twig' %}

{% block body %}
    <div class="container">

   <div class="bd-example">
        <div id="myCarousel" class="carousel slide" 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>
                <li data-target="#myCarousel" data-slide-to="3"></li>
                <li data-target="#myCarousel" data-slide-to="4"></li>
            </ol>
            <div class="carousel-inner">
                <div class="carousel-item active">
                    <img src="{{ asset('home/Photo1.jpg') }}" class="d-block w-100" alt="Vaisselle">
                    <div class="carousel-caption d-none d-md-block">
                        <h5>First slide label</h5>
                        <p>Nulla vitae elit libero, a pharetra augue mollis interdum.</p>
                    </div>
                </div>
                <div class="carousel-item active">
                    <img src="{{ asset('home/Photo2.jpg') }}" class="d-block w-100" alt="Vaisselle">
                    <div class="carousel-caption d-none d-md-block">
                        <h5>First slide label</h5>
                        <p>Nulla vitae elit libero, a pharetra augue mollis interdum.</p>
                    </div>
                </div>
                <div class="carousel-item active">
                    <img src="{{ asset('home/Photo3.jpg') }}" class="d-block w-100" alt="Vaisselle">
                    <div class="carousel-caption d-none d-md-block">
                        <h5>First slide label</h5>
                        <p>Nulla vitae elit libero, a pharetra augue mollis interdum.</p>
                    </div>
                </div>
                <div class="carousel-item active">
                    <img src="{{ asset('home/Photo4.png') }}" class="d-block w-100" alt="Vaisselle">
                    <div class="carousel-caption d-none d-md-block">
                        <h5>First slide label</h5>
                        <p>Nulla vitae elit libero, a pharetra augue mollis interdum.</p>
                    </div>
                </div>
                <div class="carousel-item active">
                    <img src="{{ asset('home/Photo5.jpg') }}" class="d-block w-100" alt="Vaisselle">
                    <div class="carousel-caption d-none d-md-block">
                        <h5>First slide label</h5>
                        <p>Nulla vitae elit libero, a pharetra augue mollis interdum.</p>
                    </div>
                </div>
            </div>
            <a class="carousel-control-prev" href="#myCarousel" 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="#myCarousel" role="button" data-slide="next">
                <span class="carousel-control-next-icon" aria-hidden="true"></span>
                <span class="sr-only">Next</span>
            </a>
        </div>
    </div>

    </div>

{% endblock %}
{% block javascripts %}
    <script type="text/javascript">
        $(document).ready(function() {
            $('.carousel').carousel({
                interval: 2000
            })
        });
    </script>
    <script src="{{ asset('js/home/index.js') }}"></script>
{% endblock %}