Twitter Bootstrap Carrousel: Droit & flèches Gauche ne fonctionne pas

Étapes pour reproduire le problème:

Allez au lien ci-dessus, dans le menu, cliquez sur "Répondre à Notre Équipe"
Interagir avec les flèches gauche et droite

Les résultats réels: Les flèches ne sont pas en train de déplacer les éléments (le point d'indicateurs en haut à droite de ne en passant, ils sont blancs et difficile à voir)

Résultat attendu: Les flèches doivent déplacer les éléments d'avant en arrière

Je suis me douter de ce qui pourrait être soit une question CSS ou d'avoir quelque chose à voir avec le fait que le carrousel est utilisé à l'intérieur de la languettes.

InformationsquelleAutor farjam | 2013-07-08

J'ai eu le même problème, il a été causé parce que ma page a été défilement, de sorte que j'ai mis dans un petit script pour lisser le défilement de chaque lien qui a commencé avec # . Cette visser les boutons gauche et droit, car ils utilisent href="#myCarousel".

Pour résoudre ce problème, j'ai ajouté une exception pour le script, comme ici-bas.

C'est le script avant que je l'ai modifié:

$(function() {
    $('a[href*=#]:not([href=#])').click(function() {
        if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') && location.hostname == this.hostname) {
            var target = $(this.hash);
            target = target.length ? target : $('[name=' + this.hash.slice(1) +']');
            if (target.length) {
                $('html,body').animate({
                    scrollTop: target.offset().top
                }, 1000);
                return false;
            }
        }
    });
});

Et j'ai juste ajouté une exception avec le thw attribut href:

$(function() {
    $('a[href*=#]:not([href=#])').click(function() {
        if( $(this).attr("href")=="#myCarousel") return;//This is the exception
        if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') && location.hostname == this.hostname) {
            var target = $(this.hash);
            target = target.length ? target : $('[name=' + this.hash.slice(1) +']');
            if (target.length) {
                $('html,body').animate({
                    scrollTop: target.offset().top
                }, 1000);
                return false;
            }
        }
    });
});

Cette réponse, c'est un an et demi de retard mais j'espère que cela aide quelqu'un d'autre.

modifier 3/12/2015:

Vous pouvez également utiliser le data-target attribut au lieu de href

Vous, monsieur, êtes un dieu d'or. Un an et demi de retard, mais il a travaillé comme un charme pour moi, j'ai utilisé le même code exactement comme vous pour un défilement fluide 🙂
Merci beaucoup pour l'ajout de votre réponse. J'ai eu le même problème et maintenant il a disparu grâce à vous.
Excellent, j'ai eu le même défilement lisse code et le même problème. Merci!
"Vous pouvez également utiliser les données de l'attribut cible au lieu d'href" ....OUI qu'il a fait pour moi avec Bootstrap 3 🙂

InformationsquelleAutor Mark E

Est votre format HTML comme ceci?

<div id="myCarousel" class="carousel slide">
  <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>
  </ol>
  <!-- Carousel items -->
  <div class="carousel-inner">
    <div class="active item">…</div>
    <div class="item">…</div>
    <div class="item">…</div>
  </div>
  <!-- Carousel nav -->
  <a class="carousel-control left" href="#myCarousel" data-slide="prev">&lsaquo;</a>
  <a class="carousel-control right" href="#myCarousel" data-slide="next">&rsaquo;</a>
</div>

Espère que ça aide!

InformationsquelleAutor Mohammad Dohadwala

Mon Manège a été de ne pas travailler trop, et j'ai changé beaucoup de choses. Cependant j'ai enfin découvert le problème; mon problème est lisse de défilement et wow.js. En fait, je ne pouvais pas appuyez sur la touche prev ou next bouton en raison de défilement fluide chose. Lorsque j'essaie d'appuyer sur le bouton, la page va vers le bas ou vers le haut. De ce fait, j'ai changer mon lisse init et wow init comme ça.

Lisse De Défilement:

$(function() {
$('a[href*=#]:not([href=#])').click(function() {
    if( $(this).attr("href")=="#CarouselSlider") return;
    if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') && location.hostname == this.hostname) {
        var target = $(this.hash);
        target = target.length ? target : $('[name=' + this.hash.slice(1) +']');
        if (target.length) {
            $('html,body').animate({
                scrollTop: target.offset().top
            }, 900);
            return false;
        }
    }
});

});

et aussi Wow.js init:

$(document).ready(

function() {

    $("html").niceScroll({
        cursorcolor:"#ba8e16",
        scrollspeed :"100",
        cursorborder:"1px solid #cf9c11",
        horizrailenabled: "false",
        cursorborderradius: "0px"
    });

}

);
nouveau WOW().init();

Maintenant, horizontal lisse est plus et mes problèmes disparaissent en quelque sorte. J'espère que ce sera utile.

InformationsquelleAutor Alper Guven

0

Vous devez inclure boostrap.js après jQuery pour le faire fonctionner. J'ai aussi trouvé une erreur pour un lien vers jQuery :
```
<script type='text/javascript' src='/ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js'></script>
```
devrait être
```
<script type='text/javascript' src='//ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js'></script>
```
- Bootstrap JS déjà inclus. Que le fichier jQuery échec du chargement est un autre problème, mais il est un autre jQuery qui est chargé dans le cas de jQuery n'est pas chargé à partir de Google.
- Avez-vous initialiser le carroussel $('#meet_team_carousel').(manège) ?
- Je ne pense pas que j'ai besoin de nécessairement l'initialiser. La classe de "carrousel" ferait la même chose. Et comme je l'ai mentionné, le tour des cercles blancs (en haut à droite) sont travail correctement et de navigation dans les articles.
- Il semble que bootstrap lui-même n'est pas amorcé, parce que si vous essayez de l'activité par la console, il dit: "TypeError: Object [object object] n'a pas de méthode 'carrousel'". Peut-être que vous pourriez avoir une erreur javascript que de le bloquer.
InformationsquelleAutor L105
0

Bootstrap dépend de jQuery. Découvrez leur pour la mise en route du modèle.

InformationsquelleAutor anxiety
0

Place JQ et votre bootstrap.min.js au bas de votre page, juste avant </body>, comme ceci:
```
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
    <script src="js/bootstrap.min.js"></script>
</body>
```
Garder à l'esprit que vous devez utiliser une version de JQ qui fonctionne avec votre version de bootstrap. Je suis à l'aide de démarrage de la version 2, j'ai donc besoin d'JQ 1.11.1

InformationsquelleAutor Nick

Vous devez vous connecter pour publier un commentaire.