Partage

Carousel Bootstrap

Probleme de rendu avec les slides carousel bootstrap

Sujet résolu
11 janvier 2018 à 22:57:44

Bonjour a tous!

Voici mon problème:

J'utilise le carousel bootstrap qui a l'air de fonctionner mais je me retrouve face un problème de rendu que je n'arrive pas à résoudre?? A chaque click "next" ou "previous", le slide fonctionne et affiche l'image correctement une fraction de seconde puis la réduit systématiquement et la positionne en haut à gauche de ma <div></div>.

Voici les appels que je fais dans ma vue index.html.twig:

<head>
    <title>meslunettes.com</title>
    <!-- for-mobile-apps -->
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="keywords" content="Catchy Carz Responsive web template, Bootstrap Web Templates, Flat Web Templates, Android Compatible web template,
Smartphone Compatible web template, free webdesigns for Nokia, Samsung, LG, SonyEricsson, Motorola web design" />
    <script type="application/x-javascript"> addEventListener("load", function() { setTimeout(hideURLbar, 0); }, false);
        function hideURLbar(){ window.scrollTo(0,1); } </script>
    <!-- //for-mobile-apps -->
    <link rel="stylesheet" type="text/css" href="{{ asset("css/jquery-ui.min.css") }}" />
    <link rel="stylesheet" type="text/css" href="{{ asset("css/jquery-ui.structure.min.css") }}" />
    <link rel="stylesheet" type="text/css" href="{{ asset("css/jquery-ui.theme.min.css") }}" />
    <link href="{{ asset("css/bootstrap.css") }}" rel="stylesheet" type="text/css" media="all" />
    <link rel="stylesheet" type="text/css" href="{{ asset("bundles/bootstrapFileInput/css/fileinput.min.css") }}" />
    <link rel="stylesheet" type="text/css" href="{{ asset("bundles/bootstrapFileInput/themes/explorer/theme.min.css") }}" />
    <link rel="stylesheet" type="text/css" href="{{ asset("css/lightslider.css") }}" />
    <link rel="stylesheet" type="text/css" href="{{ asset("css/zoomslider.css") }}" />
    <link rel="stylesheet" type="text/css" href="{{ asset("css/style.css") }}" />
    <link rel="stylesheet" type="text/css" href="{{ asset("css/component.css") }}" />
    <link rel="stylesheet" type="text/css" href="{{ asset("css/main.css") }}" />

    <!--/web-fonts-->
    <link href="{{ asset('//fonts.googleapis.com/css?family=Open+Sans:400,600,600italic,300,300italic,700,400italic') }}" rel='stylesheet' type='text/css'>
    <link href="{{ asset('//fonts.googleapis.com/css?family=Wallpoet') }}" rel='stylesheet' type='text/css'>
    <link href="{{ asset('//fonts.googleapis.com/css?family=Ubuntu:400,500,700,300') }}" rel='stylesheet' type='text/css'>
    <!--//web-fonts-->

    <script src="{{ asset('js/jquery-1.11.1.min.js') }}"></script>
    <script src="{{ asset('js/bootstrap.js') }}"></script>
    <script type="text/javascript" src="{{ asset('js/jquery-ui.min.js') }}"></script>
    {#<script type="text/javascript" src="{{ asset('js/lightslider.js') }}"></script>#}
    <script type="text/javascript" src="{{ asset('bundles/bootstrapFileInput/js/plugins/piexif.min.js') }}"></script>
    <script type="text/javascript" src="{{ asset('bundles/bootstrapFileInput/js/plugins/sortable.min.js') }}"></script>
    <script type="text/javascript" src="{{ asset('bundles/bootstrapFileInput/js/plugins/purify.min.js') }}"></script>
    <script type="text/javascript" src="{{ asset('bundles/bootstrapFileInput/js/fileinput.min.js') }}"></script>
    <script type="text/javascript" src="{{ asset('bundles/bootstrapFileInput/themes/explorer/theme.min.js') }}"></script>
    <script type="text/javascript" src="{{ asset('bundles/bootstrapFileInput/js/locales/fr.js') }}"></script>
    {#<script type="text/javascript" src="{{ asset('js/jquery.zoomslider.min.js') }}"></script>
    <script type="text/javascript" src="{{ asset('js/jquery.flexisel.js') }}"></script>#}
    <script type="text/javascript" src="{{ asset('js/modernizr-2.6.2.min.js') }}"></script>
    <script src="{{ asset('js/jquery.mask.js') }}"></script>
    <script src="{{ asset('js/main.js') }}"></script>
    <!-- Include Google Maps JS API -->
    <script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?libraries=places&key=AIzaSyCO8naz9dPide6kxouBBlRz4enkpsxWrvU"></script>
    <script src="{{ asset('js/autocomplete.js') }}" type="text/javascript" ></script>
</head>

et voici le code de la vue qui hérite de ces appels:

{% extends "MAMainBundle:Accueil:index.html.twig" %}

{% block stylesheets %}
    <link href="https://fonts.googleapis.com/css?family=Oleo+Script:400,700" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css?family=Teko:400,700" rel="stylesheet">
    <link rel="stylesheet" type="text/css" href="{{ asset("css/annonce.css") }}" />
{% endblock %}
{% block javascripts %}

{% endblock %}  
//....................//
<section id="contact">
        <div class="section-content">
            <h1 class="section-header">Mon <span class="content-header wow fadeIn " data-wow-delay="0.2s" data-wow-duration="2s"> Annonce</span></h1>
            <h3>Résumé de ma nouvelle annonce.</h3>
        </div>
        <div class="contact-section">
            <div class="single w3ls">
                <div class="container">
                    <div class="col-md-8 single-left">
                        <div class="bs-example">
                            <div id="myCarousel" class="carousel slide" data-ride="carousel">
                                <!-- Carousel indicators -->
                                {% for key, image in images%}
                                <ol class="carousel-indicators">
                                    {% for i in 0..images|length -1 %}
                                        {% if i == 0 %}
                                            <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
                                        {% else %}
                                            <li data-target="#myCarousel" data-slide-to={{ i }}></li>
                                        {% endif %}
                                    {% endfor %}
                                </ol>
                                {% endfor %}
                                <!-- Wrapper for carousel items -->
                                <div class="carousel-inner">
                                    {% if annonce.imagePrincipale is not empty %}
                                    <div class="item active">
                                        <img src="{{ asset('uploads/photos/' ~ annonce.imagePrincipale )}} " alt="{{ annonce.titre }}" style="height: 100%">
                                    </div>
                                    {% endif %}
                                    {% if annonce.imageBis is not empty %}
                                    <div class="item">
                                        <img src="{{ asset('uploads/photos/' ~ annonce.imageBis )}}" alt="{{ annonce.titre }}" style="height: 100%">
                                    </div>
                                    {% endif %}
                                    {% if annonce.imageTer is not empty %}
                                    <div class="item">
                                        <img src="{{ asset('uploads/photos/' ~ annonce.imageTer )}}" alt="{{ annonce.titre }}" style="height: 100%">
                                    </div>
                                    {% endif %}
                                </div>
                                <!-- Carousel controls -->
                                <a class="carousel-control left" href="#myCarousel" data-slide="prev">
                                    <span class="glyphicon glyphicon-chevron-left"></span>
                                </a>
                                <a class="carousel-control right" href="#myCarousel" data-slide="next">
                                    <span class="glyphicon glyphicon-chevron-right"></span>
                                </a>
                            </div>
                        </div>
                        <div class="single-left2">
                            <h3>{{ annonce.titre }}</h3>
                            <ul class="com">
                                <li><span class="glyphicon glyphicon-user" aria-hidden="true"></span>{{ app.user.username }}</li>
                                <li><span class="glyphicon glyphicon-envelope" aria-hidden="true"></span>{{ annonce.email }}</li>
                                <li><span class="glyphicon glyphicon-ok" aria-hidden="true"></span><a href="{{ path('ma_user_accueil') }}">Valider mon annonce</a></li>
                                <li><span class="glyphicon glyphicon-pencil" aria-hidden="true"></span><a href="{{ path('annonce_edit', {'id': annonce.id}) }}">Editer</a></li>
                                <li><span class="glyphicon glyphicon-trash" aria-hidden="true"></span><a href="{{ path('annonce_delete', {'id': annonce.id}) }}" onclick="return confirm('Confirmer la suppression de votre annonce ?')";>Supprimer</a></li>
                            </ul>
                            <div class="single-left2-sub">
                                <ul>
                                    <li>Description de l'offre: </li>
                                </ul>
                            </div>
                        </div>
                        <div class="single-left3" id="description">
                            <p><span>{{ annonce.description }}</span></p>
                        </div>
                    </div>
                    <div class="col-md-4 single-right">
                        <div class="blo-top">
                            <div class="tech-btm">
                                <h4>Contacter le vendeur</h4>
                                <div class="name">
                                    {{ form_start(contact_form, {'class': 'form-control'}) }}
                                    <div class="col-md-12">
                                        <div class="form-group">
                                            <label>Adresse email</label>
                                            {{ form_errors(contact_form.emailAdress)}}
                                            {{ form_widget(contact_form.emailAdress)}}
                                        </div>
                                        <div class="form-group">
                                            <label>Envoyer un message au vendeur</label>
                                            {{ form_errors(contact_form.message)}}
                                            {{ form_widget(contact_form.message)}}
                                        </div>
                                        <div>
                                            <input type="submit" value="Envoyer">
                                        </div>
                                    </div>
                                    {{ form_end(contact_form) }}
                                    {#<form action="#" method="post">
                                        <input type="text" name="email" class="email" placeholder="Enter your email address" required="">
                                        <input type="submit" value="Subscribe">
                                    </form>#}
                                    <div class="clearfix"> </div>
                                </div>
                            </div>
                        </div>
                        <div class="blo-top1">
                            <div class="agileits_twitter_posts tech-btm" id="detail_annonce">
                                <h4>Détail de l'annonce</h4>
                                <div class="row">Marque: {{ annonce.marque }}</div>
                                <div class="row">Modele: {{ annonce.modele }}</div>
                                <div class="row">Prix: {{ annonce.prix }}</div>
                                <div class="row">Telephone: {{ annonce.telephone }}</div>
                                {#<ul>
                                    <li><p><span>Marque: {{ annonce.marque }}</span></p></li>
                                    <li><p><span>Modele: {{ annonce.modele }}</span></p></li>
                                    <li><p><span>Prix: {{ annonce.prix }}</span></p></li>
                                    <li><p><span>Telephone: {{ annonce.telephone }}</span></p></li>
                                </ul>#}
                            </div>
                        </div>

                    </div>
                    <div class="clearfix"> </div>
                </div>
            </div>
        </div>
    </section>
 

Si quelqu'un à une idée?? Je lui en serai trés reconnaissant!! Merci mille fois!!!!


Vous êtes demandeur·se d'emploi ?
Sans diplôme post-bac ?

Devenez Développeur·se web junior

Je postule
Formation
courte
Financée
à 100%
12 janvier 2018 à 9:17:26

Bonjour,

Je ne vois aucun appel au JS de Bootstrap de type bootstrap.min.js par exemple.

De plus, tu ne précise pas la version de Bootstrap utilisé.

-
Edité par Lord Morpheus 12 janvier 2018 à 9:17:41

Lord Morpheus, Seigneur Morphée, Dieu Grecs des Songes, Fils de la Nuit et du Sommeil
12 janvier 2018 à 9:48:50

Salut Lord Morphus! Je remercie ton implication face à mon problème. 

Je fais bien un appel bootstrap a la ligne 30 de mon index.html.twig.

En ce qui concerne bootstrap je suis en v.3.

Merci encore!

12 janvier 2018 à 10:03:20

Bonjour,

As-tu essayé de simplement déplacer tes scripts en bas de page (juste avant la fermeture de la balise body)  ?

Cela te permettrait de respecter les bonnes pratiques du javascript mais aussi, et surtout, d'éviter de tenter d'interagir avec des éléments avant que ces derniers ne soient chargés dans le DOM...

Recherche l'avis de développeurs front : Devenir un meilleur dev front ?
12 janvier 2018 à 10:21:00

Merci pour votre aide! Voici comment j'ai résolu le problème: J'ai ajouté ces quelques ligne dans le css:
.carousel .item{
    min-height: 280px; /* Prevent carousel from being distorted if for some reason image doesn't load */
    width:650px;
    height:300px;
    margin: 0 auto;  
}


-
Edité par Ratpi@ 12 janvier 2018 à 21:06:34

Carousel Bootstrap

× Après avoir cliqué sur "Répondre" vous serez invité à vous connecter pour que votre message soit publié.
  • Editeur
  • Markdown