Bonjour,

Je travail en ce moment sur un projet symfony 4,
j'ai intégrer un carousel (bootstrap 4) dont voici le lien : https://blackrockdigital.github.io/startbootstrap-half-slider/

Lorsque je laisse les sources : http://placehold.it/1900x1080,
celles-ci dépasse la taille de mon écran et elles prennent toute la page de mon navigateur.

J'ai essayer de placer le carousel dans des div différentes tels que "row", "container", j'ai essayé différentes modification de style notament au niveau du grid, avec aussi des images personnels et je ne trouve pas de solution à mon problème.

Le carousel ne s'adapte pas à la taille de la fenètre.

Voici le code html :

<div id="carouselExampleInterval" class="carousel slide" data-ride="carousel">

        <div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel">
        <ol class="carousel-indicators">
            <li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>
            <li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
            <li data-target="#carouselExampleIndicators" data-slide-to="2"></li>
        </ol>
        <div class="carousel-inner" role="listbox">
            <div class="carousel-item active">
           <!-- <img src="/images/hamburger-avoine.jpeg" alt="..."> -->
           <img src="http://placehold.it/1900x1080" alt="...">
            </div>
            <div class="carousel-item">
           <!-- <img src="/images/des hamburgers.jpg" alt="..."> -->
            <img src="http://placehold.it/1900x1080" alt="...">
            </div>
            <div class="carousel-item">
            <!-- <img src="/images/hamburger-figues.jpeg" alt="..."> -->
            <img src="http://placehold.it/1900x1080" alt="...">
            </div>
        </div>
        <a class="carousel-control-prev" href="#carouselExampleIndicators" 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="#carouselExampleIndicators" role="button" data-slide="next">
            <span class="carousel-control-next-icon" aria-hidden="true"></span>
            <span class="sr-only">Next</span>
        </a>
        </div>

</div>

J'ai remis le code brut sans modification de ma part avec des photos tests commentées.

Est-ce que quelqu'un aurait une solution pour palier à ce problème ?

Je vous remercie d'avance

Aucune réponse