web-dev-qa-db-fra.com

Ajouter des diapositives à Bootstrap 3 carrousel dynamiquement à l'aide de jQuery

J'essaie d'ajouter des diapositives au carrousel Bootstrap en utilisant jQuery mais il n'agit pas comme un curseur dans le navigateur. Au lieu de cela, il affiche les images en mode liste.

<!DOCTYPE html>
<html>
<head>
<link href="Assets/css/bootstrap.css" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js">        </script>
<script src="Assets/js/bootstrap.min.js"></script>
<title></title>
<script>
    onload=function(){

        for(var m=3;m>=0;m--)
        {
            var path="file_uploads/"+m+".jpg";
            $(".carousel-indicators").after("<li data-target='#carousel-example-generic' data-slide-to=\""+m+"\"></li>");
            $(".carousel-inner").after("<div class='item'><img src='"+path+"' alt='"+m+"'></div>");             
        }

        $(".carousel-indicators li:first").addClass("active");
        $(".carousel-inner .item:first").addClass("active");
        $('.carousel').carousel();
    }
</script>
</head>
<body>
  <div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
  <!-- Indicators -->
    <ol class="carousel-indicators">

    </ol>
    <!-- Wrapper for slides -->
    <div class="carousel-inner">       

    </div>

    <!-- Controls -->
    <a class="left carousel-control" href="#carousel-example-generic" data-slide="prev">
        <span class="glyphicon glyphicon-chevron-left"></span>
    </a>
    <a class="right carousel-control" href="#carousel-example-generic" data-slide="next">
        <span class="glyphicon glyphicon-chevron-right"></span>
    </a>
  </div>
</body>
</html>
jquerytwitter-bootstrap-3slidercarousel
24
idrisjafer

Tout d'abord, je vais m'appuyer sur le fait que m est un tableau avec l'URL appropriée pour vos images.

Le HTML devrait être comme ceci:

<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
  <!-- Indicators -->
  <ol class="carousel-indicators"></ol>
  <!-- Wrapper for slides -->
  <div class="carousel-inner"></div>
  <!-- Controls -->
  <a class="left carousel-control" href="#carousel-example-generic" data-slide="prev">
    <span class="glyphicon glyphicon-chevron-left"></span>
  </a>
  <a class="right carousel-control" href="#carousel-example-generic" data-slide="next">
    <span class="glyphicon glyphicon-chevron-right"></span>
  </a>
</div>

Le carrousel de classe est vide, c'est là que vous allez placer vos images pour le carrousel.

Les indicateurs de classe du carrousel sont également vides, seront remplis par JS.

Ensuite, vient le JS: (comme je l'ai dit, je me fie au fait que m est un tableau d'urls imgs)

$(document).ready(function(){  
  for(var i=0 ; i< m.length ; i++) {
    $('<div class="item"><img src="'+m[i]+'"><div class="carousel-caption"></div>   </div>').appendTo('.carousel-inner');
    $('<li data-target="#carousel-example-generic" data-slide-to="'+i+'"></li>').appendTo('.carousel-indicators')

  }
  $('.item').first().addClass('active');
  $('.carousel-indicators > li').first().addClass('active');
  $('#carousel-example-generic').carousel();
});

Fondamentalement, vous ajoutez toutes vos images à la classe carrousel-inner, vous ajoutez des li de contrôle de carrousel, puis vous ajoutez la classe active à la première image et au premier indicateur de carrousel li., Et enfin, vous initialisez votre carrousel. Notez que tout cela se trouve dans une fonction prête pour le document, ce qui vous manque. Ce que vous faites, c'est seulement définir une fonction appelée onload

J'espère que ça aide !

EDIT: J'ai vu que vous produisez également une balise alt sur les images, mais c'est quelque chose qui n'a pas besoin d'être sur ma réponse, je parie que vous pouvez le faire sans problème.

38
avcajaraville

Eh bien, Bootstrap Carousel a divers paramètres à contrôler.

c'est à dire.

Intervalle: Spécifie le délai (en millisecondes) entre chaque diapositive.

pause: Interrompt le carrousel de passer par la diapositive suivante lorsque le pointeur de la souris entre dans le carrousel et reprend le glissement lorsque le pointeur de la souris quitte le carrousel.

wrap: Spécifie si le carrousel doit parcourir toutes les diapositives en continu, ou s'arrêter à la dernière diapositive

Pour votre référence:

parameters of carousel

Pour plus de détails, veuillez cliquez ici ...

J'espère que ceci vous aidera :)

Remarque: c'est pour plus d'aide .. Je veux dire comment pouvez-vous personnaliser ou changer le comportement par défaut une fois le carrousel chargé.

1
Vikash Pandey

Vous pouvez essayer.

Marquage

<div id="carousel-deck" class="carousel slide" data-ride="carousel"
    data-interval="false" data-wrap="false">
    <ol class="carousel-indicators">
    </ol>
    <div class="carousel-inner">
    </div>
    <a class="left carousel-control" href="#carousel-deck"
        data-slide="prev">
        <span class="glyphicon glyphicon-chevron-left"></span><span
            class="sr-only">Previous</span>
    </a>
    <a class="right carousel-control" href="#carousel-deck"
        data-slide="next"><span
            class="glyphicon glyphicon-chevron-right"></span><span
            class="sr-only">Next</span>
    </a>
</div>

JS 

var markup = '';
for (var index = 0; index < count; index++) {
    markup += '<li data-target="#carousel-deck" data-slide-to="' + index + '"></li>';
}
$('#carousel-deck .carousel-indicators').html(markup);
markup = '';
for (var index = 0; index < count; index++) {
    markup += '<div class="item">';
    markup += '<img src="/images/uploads/' + file.uuid + '/slides/slide_' + (index + 1) + '.jpg" style="width:100%;">'
    markup += '</div>';
}
$('#carousel-deck .carousel-inner').html(markup);
$('#carousel-deck .item').first().addClass('active');
$('#carousel-deck .carousel-indicators > li').first().addClass('active');
$('#carousel-deck').carousel({
    pause: true,
    interval: false
});
0
Rick