Carousel bootstrap

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 inclus 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 %}

une sélection des sites pornographiques les plus populaires et les plus chauds avec des critiques à leur sujet https://freeonlineporn.me
Modifié par mibahicu (06 May 2021 - 08:31)

Bonjour,

1) Qu'est-ce qui ne marche pas ? C'est quoi les symptômes ?
2) Si l'on suppose
- que les versions de jquery, popper et bootstrap sont ok
- qu'il n'y a pas d'erreurs dans la console du navigateur quand tu essaies d'afficher la page,
- que l'accès à toutes les ressources (css, js, jpg) n'est pas bloqué pour une raison ou pour une autre, il est probable qu'il suffise de remplacer (sauf pour la 1re image) :

<div class="carousel-item active">

par

<div class="carousel-item">

Amicalement,
Modifié par parsimonhi (02 Feb 2021 - 09:28)