[Résolu] 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 %}

Modifié par zarm (23 Apr 2019 - 19:20)

hello

as-tu appelé le script bootstrap.js?

Salut,

As-tu essayé d'appeler les scripts Bootstrap dans le footer plutôt que dans le header ?
Sur le site Bootstrap il est bien indiqué que les scripts doivent être chargé à la fin du body :
"Place the following <script>s near the end of your pages, right before the closing </body> tag, to enable them"

Ca fixera peut-être le problème

Salut les gars.

En fait l'erreur vient de moi. Erreur d'inattention

J'avais mise toutes les items en classe active.

Et donc ça coincé forcément.
Modifié par zarm (24 Apr 2019 - 14:11)