Carousel Bootsrap et Symfony

fazil
PHP Symfony

Bonjour à tous,

Voila je rencontre un petit problème avec mon code.

J'essaie sans succès d'adapter un Carousel Boostrap à mon code pour pouvoir afficher le contenu d'une de mes tables, mais je n'arrive pas à harmoniser les deux logiques, je me doute que cela doit être assez simple mais mon niveau malheureusement ne me permet pas de m'en sotir. Besoin d'aide svp. Merci d'avance pour toute attention.

Ici ma boucle
{% if produits|length != 0 %}
{% for produit in produits %}
    <div class="thumbnail">
    <img src="{{ asset(produit.image.AssetPath) }}" >
    <div class="caption">
    <p>{{ produit.nom }}
    </div>
    </div>
{% endfor %}
{% else %}
Prochainement !
{% endif %}
Ici Bootstrap
<!-- Carousel
            ================================================== -->
            <div id="myCarousel" class="carousel slide" data-ride="carousel">
              <div class="carousel-inner">
                <div class="item active">
                    <div class="thumbnail">
                      <img src="http://placehold.it/300x200/" alt="Slide1">
                      <div class="caption">

                      </div>
                    </div>        
                </div><!-- End Item -->
                <div class="item">
                    <div class="thumbnail">
                      <img src="http://placehold.it/300x200/" alt="Slide2">
                      <div class="caption">

                      </div>
                    </div>        
                </div><!-- End Item -->
                <div class="item">
                    <div class="thumbnail">
                      <img src="http://placehold.it/300x200/" alt="Slide1">
                      <div class="caption">

                      </div>
                    </div>        
                </div><!-- End Item -->                                
              </div><!-- End Carousel Inner -->
              <div class="carousel-controls">
                <a class="left carousel-control" href="#myCarousel" data-slide="prev"><span class="glyphicon glyphicon-chevron-left"></span></a>
                <a class="right carousel-control" href="#myCarousel" data-slide="next"><span class="glyphicon glyphicon-chevron-right"></span></a>
              </div>
            </div><!-- /.carousel -->

15 réponses

Nightbringer
Réponse acceptée

Salut, essaye ça :

{% if produits|length != 0 %}
           <div id="myCarousel" class="carousel slide" data-ride="carousel">
              <div class="carousel-inner">
              {% for produit in produits %}
              <div class="item">
              <div class="thumbnail">
              <img src="{{ asset(produit.image.AssetPath) }}" >
              <div class="caption">
              <p>{{ produit.nom }}</p>
              </div>
              </div>
            </div>
            {% endfor %}                     
              </div><!-- End Carousel Inner -->
              <div class="carousel-controls">
                <a class="left carousel-control" href="#myCarousel" data-slide="prev"><span class="glyphicon glyphicon-chevron-left"></span></a>
                <a class="right carousel-control" href="#myCarousel" data-slide="next"><span class="glyphicon glyphicon-chevron-right"></span></a>
              </div>
            </div><!-- /.carousel -->
{% else %}
Prochainement !
{% endif %}
Nightbringer
Réponse acceptée

ah ah ^^ bon ton carousel fonctionne c'est déjà pas mal. Pour afficher plusieurs items sur un slide, il faut utiliser un modulo mais je vais pas tout te macher le travail. J'ai déjà réalisé ça sur ce site (https://welp.fr), je te met sur la piste avec ce code, il faut bien réfléchir et dérouler la boucle for dans ta tête (ou sur papier) pour bien comprendre comment tes item vont se construire. Good luck & have fun ;)

{% set pLimit = 4 %}
        <div class="carousel-inner" role="listbox">
            <div class="item proposition-item active">
              {% if propositions | length == 0 %}
                <h2>Aucun résultat</h2>
              {% endif %}
        {% for proposition in propositions %}
            {% include 'AppBundle:Propositions:_card.html.twig' with {'proposition':proposition} %}
            {% if loop.index % plimit == 0 and not loop.last %}
            </div>
            <div class="item proposition-item">
            {% endif %}
        {% endfor %}
            </div>
        </div>
            </div>
        </div>
fazil
Auteur

Salut Nightbringer,
Merci pour ta réponse, je viens de la tester mais sans grand succès, 

                {% if produits|length != 0 %}

                <div id="myCarousel" class="carousel slide">
                    <div class="carousel-inner">
                        {% for produit in produits %}
                        <div class="item active">
                            <div class="row">

                                <div class="col-md-4">
                                    <div class="row">
                                        <div class="col-md-12 bgviolet left">
                                            <p><span class="prestitre">{{ produit.pays.nom }} - {{ produit.ville.nom }} - {{ produit.categorie.nom }}</span></p>
                                        </div>
                                            <div class="col-md-12">
                                                <div class="thumbnail">
                                                    <img src="{{ asset(produit.image.AssetPath) }}" alt="{{ produit.image.name }}" width="280" height="150">
                                                    <div class="caption">
                                                        <p>{{ produit.nom }}<br>Hôtel - {{ produit.nomhotel }}<br>
                                                            Chambre double : {{ produit.prix }} Da<br/>
                                                            Par personne : {{ produit.prix / 2 }}Da&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; Dép: {{ produit.jdep }} {{ produit.mdep }}<br> Séjour - {{ produit.nuit }} nuits</p>
                                                        <a class="" href="{{ path('presentation', { 'id' : produit.id }) }}">..Suite</a>&nbsp;&nbsp;&nbsp;
                                                        <a class="" href="{{ path('adminDevis_new', { 'id' : produit.id }) }}">Devis personnalisé</a>&nbsp;&nbsp;&nbsp;
                                                        Réf {{ produit.id }}
                                                    </div>
                                                </div>
                                        </div>
                                    </div>
                                </div>

                            </div>
                        </div>
                        {% endfor %}
                    </div>
                </div><!-- End Carousel -->
                {% else %}
                    Prochainement !
                {% endif %}

Rendu sur le net ici: http://fazilnahnah.com/TriptoAlgeria/web/test#myCarousel

et quand je rajoute une boucle à l'interieur d'un item comme suite :

  {% if produits|length != 0 %}

                <div id="myCarousel" class="carousel slide">
                    <div class="carousel-inner">
                        {% for produit in produits %}
                        <div class="item active">
                            <div class="row">
                                {% for produit in produits %}
                                <div class="col-md-4">
                                    <div class="row">
                                        <div class="col-md-12 bgviolet left">
                                            <p><span class="prestitre">{{ produit.pays.nom }} - {{ produit.ville.nom }} - {{ produit.categorie.nom }}</span></p>
                                        </div>
                                            <div class="col-md-12">
                                                <div class="thumbnail">
                                                    <img src="{{ asset(produit.image.AssetPath) }}" alt="{{ produit.image.name }}" width="280" height="150">
                                                    <div class="caption">
                                                        <p>{{ produit.nom }}<br>Hôtel - {{ produit.nomhotel }}<br>
                                                            Chambre double : {{ produit.prix }} Da<br/>
                                                            Par personne : {{ produit.prix / 2 }}Da&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; Dép: {{ produit.jdep }} {{ produit.mdep }}<br> Séjour - {{ produit.nuit }} nuits</p>
                                                        <a class="" href="{{ path('presentation', { 'id' : produit.id }) }}">..Suite</a>&nbsp;&nbsp;&nbsp;
                                                        <a class="" href="{{ path('adminDevis_new', { 'id' : produit.id }) }}">Devis personnalisé</a>&nbsp;&nbsp;&nbsp;
                                                        Réf {{ produit.id }}
                                                    </div>
                                                </div>
                                        </div>
                                    </div>
                                </div>
                                {% endfor %}
                            </div>
                        </div>
                        {% endfor %}
                    </div>
                </div><!-- End Carousel -->
                {% else %}
                    Prochainement !
                {% endif %}

J'ai mes poste que se mettent "inline".

Encore une fois merci pour ton attention

fazil
Auteur

Oups j'ai cliqué sur résolu malencontreusement alors la question ne l'est toujours...désolé..

Nightbringer

Re-,
regarde la console developer, elle te dit que bootstrap a besoin de la dépendance jQuery :

Je te conseille donc de mettre jQuery dans ton application installer jQuery

Ajoute ça sur ta page pour tester dans un premier temps :

    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>

Après j'espère que tu as aussi déjà inclue le bootstrap.js sinon je te conseille de bien lire la doc de bootstrap ici 

    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script src="js/bootstrap.min.js"></script>
fazil
Auteur

Re-merci

Le problème persiste, malgrè mes appelles js.

Ici mon Layout 

        <link href="{{ asset('css/bootstrap.min.css') }}" rel="stylesheet">
        <link rel="stylesheet" href="{{ asset('css/bootstrap-responsive.css') }}" />
        <link rel="stylesheet" href="{{ asset('css/style.css') }}" />
        <link rel="stylesheet" href="{{ asset('css/font-awesome.css') }}" />
</head>
<body>
        {% block body %}{% endblock %}
        <footer id="footer" class="vspace20">
        </footer>

    <script src="{{ asset('js/bootstrap.min.js') }}"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
    <script>
        $('#myCarousel').carousel({
            interval:   4000
        });
    </script>

        {% block javascripts %}{% endblock %}
    </body>
</html>
fazil
Auteur

Nightbringer;

J'ai mis directement jQuery dans mon dossier js malgrè cela ça ne marche toujours pas

    <script src="{{ asset('js/bootstrap.min.js') }}"></script>
        <script src="{{ asset('js/jquery-1.12.0.min.js') }}"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
    <script>
        $('#myCarousel').carousel({
            interval:   4000
        });
    </script>
Nightbringer

regarde ce que tu as dans la console developer de ton navigateur F12.
vérifie que bootstrap est correctement installé sur ton application en suivant bien la doc.

fazil
Auteur

Merci Nightbringer, je continue de chercher...

Nightbringer

omfg... je l'ai pas vu tout de suite mais tu import jQuery après bootstrap... 

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
    <script src="{{ asset('js/bootstrap.min.js') }}"></script>
fazil
Auteur

Salut Nightbringer,

Merci pour ta remarque, j'ai rectifier le tir, et le meilleur rendu que j'ai pu obtenir c'est le suivant:
http://fazilnahnah.com/TriptoAlgeria/web/test
Avec le code ci-dessous, j'ai remarqué qu'il fallait à tout prix mettre une item active + une autre pour que le carousel se mette à fonctionner, alors j'en ai collé une à la fin sans rien dedans car le but ce n'ai pas d'avoir deux boucles for. Le problème maintenant est comment faire pour avoir deux ou trois produits dans un item ? j'ai mis une boucle à l'intérieur d'une item mais j'ai tous mes produits qui s'affichent..

Bref je continu à voir,

{% if produits|length != 0 %}
                    <div id="myCarousel" class="carousel slide">
                        <div class="carousel-inner">
                            {% for produit in produits %}
                                    <div class="item">
                                            <div class="col-md-4">
                                                <div class="thumbnail">
                                                            .....
                                                    </div>
                                                </div>
                                            </div>
                                    </div>
                            {% endfor %}
                            <div class="item active"></div>
                        </div>
                    </div><!-- End Carousel -->
                {% else %}
                    Prochainement !
                {% endif %}
fazil
Auteur

Ca marche.... merci pour l'indice ;)

fazil
Auteur

Eureka Nightbringer ! merciii, je ne saurais pas encore donner une définition exact du loop.index, mais j'ai vu qu'il fallait utiliser la boocle for pour créer nos item. cool. Gros merci.

                {% set plimit = 3 %}
                {% if produits|length != 0 %}
                    <div id="myCarousel" class="carousel slide">
                        <div class="carousel-inner">
                                    <div class="item produit-item active">
                                        {% for produit in produits %}
                                            <div class="col-md-4">
                                                <div class="thumbnail">
                                                        ....
                                                    </div>
                                                </div>
                                            </div>
                                        {% if loop.index % plimit == 0 and not loop.last %}
                                    </div>
                                    <div class="item produit-item">
                                        {% endif %}
                                        {% endfor %}
                                    </div>
eloy.e

Bonsoir, je déterre le sujet . J'essaie egalement de le faire mais quand je teste votre code, les thumbnails se mettents les uns en dessous des autres ... comment faire ?

Lartak

Bonsoir.
Si tu pouvais être plus précis et créer ton propre sujet au lieu d'en déterrer un qui a plus de 5 ans, ce serait mieux pour que nous puissions t'aider..