Carousel bootstrap sous symfony

Par Devdeb22, il y a 7 ans

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

4 réponses

Devdeb22, il y a 7 ans

Haalala ! Merci Lartak

Voilà comment on perd une journée complète pour rien (à cause d'une erreur d'innatention)

Le pire c'est que j'avais trouvé une solution durant la nuit.

Encore un grand merci car maintenant j'ai enlevé les autres classe active et ça fonctionne.

Lartak, il y a 7 ans

Bonjour.
Et que ce passe t'il exactement ?
As-tu vérifié dans l'inspecteur s'il n'y a pas d'erreur dans la console et/ou au niveau de tes images ?
C'est bien de nous montrer du code, mais il faudrait quand même que nous sacions si tu as une/des erreur(s).

Devdeb22, il y a 7 ans

J'ai regardé dans l'inpspecteur il n'y a pas d'erreur. C'est peut-être moi qui ai mal regardé.

Je ne sais pas si c'est pas un problème de compabilité avec symfony car j'ai essayé le même code dans un fichier html standar et ça fonctionne très bien.

Il ya carousel d'anciennes versions qui fonctionne mais pas d'une manière optimal.

Mais je prends des vesions plus récentes soit les images sont affichés un en dessous des autres.

Ou sinon ils sont bien affiché dans la div pour le carousel, mais le carousel en lui-même reste figé à une image et même quand on clique sur les liens pour passer à une autre image, ça reste figé.

J'ai regardé sur le net apparemment je ne suis pas la seule à avoir ce problème. où le carousel reste statique

Lartak, il y a 7 ans

Je viens de voir quelque chose, tu as mis tous les carousel-item actifs, il ne te faut mettre la classe active que sur le premier carousel-item.
Si tu ne veux pas t'embéter avec la classe active, tu peux par exemple faire :

jQuery(document).ready(function ($) { $('.carousel-indicators > li:first').addClass('active'); $('.carousel-inner > .carousel-item:first').addClass('active'); $('.carousel').carousel({ interval: 2000 }); });