IdentifiantMot de passe
Loading...
Mot de passe oublié ?Je m'inscris ! (gratuit)
Navigation

Inscrivez-vous gratuitement
pour pouvoir participer, suivre les réponses en temps réel, voter pour les messages, poser vos propres questions et recevoir la newsletter

jQuery Discussion :

[Bootstrap] Auto Carousel


Sujet :

jQuery

Vue hybride

Message précédent Message précédent   Message suivant Message suivant
  1. #1
    Membre émérite
    Homme Profil pro
    Ingénieur développement logiciels
    Inscrit en
    Novembre 2015
    Messages
    644
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 31
    Localisation : France, Loire Atlantique (Pays de la Loire)

    Informations professionnelles :
    Activité : Ingénieur développement logiciels
    Secteur : High Tech - Multimédia et Internet

    Informations forums :
    Inscription : Novembre 2015
    Messages : 644
    Par défaut [Bootstrap] Auto Carousel
    Hello,

    Petit topic par rapport à deux soucis que je rencontre avec le carousel de Bootstrap.

    Tout d'abord, je mets le code (J'ai poster en section JS, parce que je suppose que le problème est là-dessus, mais rien de sur, donc au besoin, merci de bouger le topic n_n)

    Concernant la structure HTML :
    Code html : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    <div class="container">
    <div id="myCarousel" class="carousel slide"  data-ride="carousel">
    <!-- Indicateurs -->
    <ol class="carousel-indicators">
    <li class="item1 car-dots active"></li>
    <li class="item2 car-dots "></li>
    <li class="item3 car-dots "></li>
    <li class="item4 car-dots "></li>
    <li class="item5 car-dots "></li>
    <li class="item6 car-dots "></li>
    <li class="item7 car-dots "></li>
    </ol>
     
    <!-- Wrapper for slides -->
    <div class="carousel-inner" role="listbox">
     
    <div class="item active">
    <img src="images/homepage_hts/Phrase_accroche.jpg" alt="" width="460" height="345">
    </div>
    <div class="item">
    <img src="images/homepage_hts/SoliTudiant.jpg" alt="" width="460" height="345">
    </div>
    <div class="item">
    <img src="images/homepage_hts/SoliFruits.jpg" alt="" width="460" height="345">
    </div>
    <div class="item">
    <img src="images/homepage_hts/SolidArt.jpg" alt="" width="460" height="345">
    </div>
    <div class="item">
    <img src="images/homepage_hts/SoliShop.jpg" alt="" width="460" height="345">
    </div>
    <div class="item">
    <img src="images/homepage_hts/SoliStarter.jpg" alt="" width="460" height="345">
    </div>
    <div class="item">
    <img src="images/homepage_hts/SoliBalsa.jpg" alt="" width="460" height="345">
    </div>
     
    <a class="left carousel-control" href="#myCarousel" role="button" style="background: none; border: none;">
    <span class="fa fa-chevron-left" aria-hidden="true" style="font-size: 24px"></span>
    <span class="sr-only"></span>
    </a>
    <a class="right carousel-control" href="#myCarousel" role="button" style="background: none; border: none;">
    <span class="fa fa-chevron-right" aria-hidden="true" style="font-size: 24px"></span>
    <span class="sr-only"></span>
    </a>
    </div>
    </div>

    Et le JS :
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    jQuery(document).ready(function(){
    // Activate Carousel
    jQuery("#myCarousel").carousel({
    interval: 5000,
    cycle: true
     
    });
     
    // Enable Carousel Indicators
    jQuery(".item1").click(function(){
    jQuery("#myCarousel").carousel(0);
    });
    jQuery(".item2").click(function(){
    jQuery("#myCarousel").carousel(1);
    });
    jQuery(".item3").click(function(){
    jQuery("#myCarousel").carousel(2);
    });
    jQuery(".item4").click(function(){
    jQuery("#myCarousel").carousel(3);
    });
    jQuery(".item5").click(function(){
    jQuery("#myCarousel").carousel(4);
    });
    jQuery(".item6").click(function(){
    jQuery("#myCarousel").carousel(5);
    });
    jQuery(".item7").click(function(){
    jQuery("#myCarousel").carousel(6);
    });
     
    // Enable Carousel Controls
    jQuery(".left").click(function(){
    jQuery("#myCarousel").carousel("prev");
    });
    jQuery(".right").click(function(){
    jQuery("#myCarousel").carousel("next");
    });
    });
    Je précise que je suis sous Joomla! et que ce code est donc inclut dans un module.

    Les problèmes que je rencontre sont les suivants :
    - Le carousel fait un cycle entier correctement, mais à la fin du second, il freeze et ne repart pas au début.
    - Après la dernière image, le carousel disparaît puis réapparaît (Comme si on jouait avec un display: block / none)

    Si quelqu'un à d'éventuelles idées... Je suis preneur !

  2. #2
    Membre émérite
    Homme Profil pro
    Ingénieur développement logiciels
    Inscrit en
    Novembre 2015
    Messages
    644
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 31
    Localisation : France, Loire Atlantique (Pays de la Loire)

    Informations professionnelles :
    Activité : Ingénieur développement logiciels
    Secteur : High Tech - Multimédia et Internet

    Informations forums :
    Inscription : Novembre 2015
    Messages : 644
    Par défaut
    Résolu !

    (J'avais tout simplement des conflits entre le JS de Bootstrap et celui de mon template Joomla!)

+ Répondre à la discussion
Cette discussion est résolue.

Discussions similaires

  1. [Débutant] Carousel bootstrap en fond d'écran
    Par Seb.26 dans le forum ASP.NET
    Réponses: 3
    Dernier message: 28/11/2015, 10h24
  2. Carousel bootstrap à modifier
    Par yanning dans le forum Général JavaScript
    Réponses: 3
    Dernier message: 08/08/2014, 17h12
  3. Contrôler carousel bootstrap
    Par GJuubz dans le forum Général JavaScript
    Réponses: 0
    Dernier message: 14/07/2014, 16h43
  4. Carousel avec Bootstrap
    Par soeursourire dans le forum Débuter
    Réponses: 0
    Dernier message: 30/06/2014, 17h02
  5. Réponses: 8
    Dernier message: 17/05/2002, 09h08

Partager

Partager
  • Envoyer la discussion sur Viadeo
  • Envoyer la discussion sur Twitter
  • Envoyer la discussion sur Google
  • Envoyer la discussion sur Facebook
  • Envoyer la discussion sur Digg
  • Envoyer la discussion sur Delicious
  • Envoyer la discussion sur MySpace
  • Envoyer la discussion sur Yahoo