Bootstrap Carrousel des Transitions et Prev/Next Boutons qui ne fonctionnent Pas

Je suis en train de mettre en œuvre le twitter bootstrap carousel, et il ne fonctionne pas - il ne bascule pas automatiquement les images, ET les boutons précédent/suivant ne fonctionnent pas.

J'ai essayé de commutation de jquery 1.7.1 comme l'a suggéré sur Bootstrap Carrousel Pas Automatiquement Coulissantes et Bootstrap Carrousel ne fonctionne Pas, mais rien ne semble aider.

Toutes les idées seront les bienvenues.

<!DOCTYPE html>
<html>
    <head>
        <title>Slideshow Test</title>
        <link href="css/bootstrap.css" rel="stylesheet" type="text/css" />
        <script src="js/bootstrap.js"></script>
        <script src="js/jquery-1.7.1.min.js"></script>
        <script src="js/bootstrap-transition.js"></script>
    </head>
    <body>
        <div id="myCarousel" class="carousel slide" style="width:450px">
            <!-- Carousel items -->
            <div class="carousel-inner">
                <div class="item active"><img src="img/IMG_2.jpg"></div>                
                <div class="item"><img src="img/IMG_3.jpg"></div>
                <div class="item"><img src="img/IMG_1.jpg"></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>
        </div>    
    </body>
</html>

Vous pouvez l'afficher et ses fichiers liés à www.abbymilberg.com/bootstrap.

OriginalL'auteur | 2012-09-23

9

Vous devez inclure bootstrap.js après vous d'inclure jquery.js:
```
<script src="js/jquery-1.7.1.min.js"></script>
<script src="js/bootstrap.js"></script>
```
Aussi, bootstrap-transition.js devrait arriver avant tous les autres Bootstrap plugins (mais toujours après jQuery, comme Daniel correctement identifiés).
Merci!!!! Fixe - le, vous êtes les meilleurs!!!
Merci Daniel!!! Votre réponse m'a beaucoup aidé!
un plaisir de vous aider 🙂

OriginalL'auteur Daniil Ryzhkov
15

J'ai eu le même problème, même y compris .js dans le propper ordre, et je l'ai corrigé unsing javascript sur "onclick" événement comme suit:
```
<a class="left carousel-control" href="#myCarousel" data-slide="prev" onclick="$('#myCarousel').carousel('prev')">‹</a>
<a class="right carousel-control" href="#myCarousel" data-slide="next" onclick="$('#myCarousel').carousel('next')">›</a>
```
Je sais que ce n'est pas la solution la plus propre, mais ça fonctionne.

Si vous avez ce problème, assurez-vous que le href de la prev/next boutons fait référence à l'ID correct. Il devrait être #id (jquery notation). Ne devrait pas être nécessaire d'ajouter onclick.
Même problème ici. Je vais pour la onclick sale fixer, mais s'il vous arrive de savoir pourquoi cela ne fonctionne pas, je serais heureux d'en entendre parler.
Vous pouvez aussi ajouter le return false comme ce onclick="$('#carouselInner').carrousel('suivant'); return false;"
Même ici sur bs4

OriginalL'auteur user2139170

Essayez de fermer "carrousel-inner" avant les contrôles de début

<div id="myCarousel" class="carousel slide" style="width:450px">
    <div class="carousel-inner">
        <div class="item active"><img src="img/IMG_2.jpg"></div>                
        <div class="item"><img src="img/IMG_3.jpg"></div>
        <div class="item"><img src="img/IMG_1.jpg"></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>

C'est parce que l'OP inclut jquery après bootstrap. Cela ne les aidera pas
Eh bien, il a travaillé pour ces gars-là twitter.github.com/bootstrap/javascript.html#carousel
Mais ne résoudra pas OP du problème.
Merci, je comprends. Juste vraiment pensé que c'était div.
Mettre jquery avant de bootstrap fixé mon problème d'origine, mais après j'ai fait qu'il n'était toujours pas en boucle correctement après être passé par tous mes diapositives. Suite à cette suggestion résolu le problème, donc merci!

OriginalL'auteur noel

2

J'ai eu le même problème et je l'ai fixée par l'ajout de z-index dans le fichier css:
```
.carousel-control.left, .carousel-control.right {
  left: 0;
  z-index: 1;
}
```
Cela m'a aidé car j'ai été en utilisant un hack pour changer le .carousel-caption'z-index, j'ai donc dû également modifier le z-index des contrôles de manière à ce qu'ils apparaissaient sur le dessus de la légende.

OriginalL'auteur Kimmiekim

Suite à la réponse par user2139170, ce est la bonne façon de structurer votre carrousel (BootStrap 3.3.5):

jsFiddle Exemple

<div id="myCarousel" class="carousel slide text-center" 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>
    </ol>
    <div class="carousel-inner" role="listbox">
        <div class="item active">
            <h4>A mind-bending lecture on applied philosophy by Oxford lecturer Ravi Zacharias.</h4>
            <br>
            <span class="font-normal">youtube/watch?v=3ZZaoavCsYE</span>
        </div>
        <div class="item">
            <h4>Director of the Human Genome Project discusses the greatest mystery of life</h4>
            <br>
            <span class="font-normal">youtube/watch?v=EGu_VtbpWhE</span>
        </div>
    </div>

    <a href="" class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
        <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
        <span class="sr-only">Previous</span>
    </a>
    <a href="" class="right carousel-control" href="#myCarousel" role="button" data-slide="next">
        <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
        <span class="sr-only">Next</span>
    </a>
</div><!-- #myCarousel -->

<script>
    $(function(){

        $('.carousel-control').click(function(e){
            e.preventDefault();
            $('#myCarousel').carousel( $(this).data() );
        });

    });//END document.ready
</script>

Note: cette réponse nécessite jQuery, afin de s'assurer que la bibliothèque est chargé. Bien sûr, bootstrap nécessite jQuery donc, vous devriez déjà l'avoir référencé.

OriginalL'auteur gibberish

0

J'ai eu les mêmes symptômes, mais mon problème est que je n'ai pas compris un id de mon manège. L'ajout d'un id sur le même div que a la .carousel classe, et à l'aide de href="#my-carousel" sur le bouton/liens résolu le problème pour moi, comme suggéré par d'autres utilisateurs dans les commentaires.
```
<div id="my-carousel" class="carousel slide" style="width:450px">
            ^----------------------------------v
    <a class="carousel-control left" href="#my-carousel" data-slide="prev">&lsaquo;</a>
    <a class="carousel-control right" href="#my-carousel" data-slide="next">&rsaquo;</a>
</div>
```
OriginalL'auteur Antoine Bolvy

Vous devez vous connecter pour publier un commentaire.