wake-up-neo.com

Fügen Sie Folien zu Bootstrap 3 Karussell dynamisch mit jQuery hinzu

Ich versuche, mit jQuery Folien zum Bootstrap Karussell hinzuzufügen, aber es fungiert nicht als Schieberegler im Browser, sondern zeigt die Bilder in der Listenansicht an.

<!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> 
24
idrisjafer

Als erstes werde ich mich auf die Tatsache verlassen, dass m ein Array mit der richtigen URL für Ihre Bilder ist.

Das HTML sollte so aussehen:

<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>

Die innere Klasse des Karussells ist leer. Dort werden Sie Ihre Bilder für das Karussell platzieren.

Klasse Karussell-Indikatoren ist auch leer, wird von JS gefüllt.

Dann kommt der JS: (wie gesagt, ich verlasse mich auf die Tatsache, dass m ein Array von imgs url ist)

$(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();
});

Grundsätzlich hängen Sie alle Ihre Bilder an die Klasse Karussell-Innen an, fügen Karussell-Steuerelemente hinzu, fügen dann die aktive Klasse zum ersten Bild und zum ersten Karussell-Indikator hinzu und initialisieren schließlich Ihr Karussell. Beachten Sie, dass sich all dies in einer dokumentenfertigen Funktion befindet, die Ihnen fehlt . Sie definieren lediglich eine Funktion namens onload

Ich hoffe es hilft !

EDIT: Ich habe gesehen, dass Sie auch Alt-Tags für Bilder ausgeben, aber das ist etwas, das nicht unbedingt in meiner Antwort enthalten sein muss. Ich wette, Sie können das ohne Probleme tun.

38
avcajaraville

Nun, Bootstrap Karussell hat verschiedene Parameter zu steuern.

d.h.

Intervall: Gibt die Verzögerung (in Millisekunden) zwischen den einzelnen Folien an.

Pause: Hält das Karussell an, die nächste Folie zu durchlaufen, wenn der Mauszeiger in das Karussell eintritt, und setzt das Gleiten fort, wenn der Mauszeiger das Karussell verlässt.

wrap: Gibt an, ob das Karussell alle Folien fortlaufend durchlaufen oder bei der letzten Folie anhalten soll

Als ihre referenz:

parameters of carousel

Für mehr Details bitte hier klicken ...

Hoffe das wird dir helfen :)

Hinweis: Dies ist eine weitere Hilfe. Ich meine, wie können Sie das Standardverhalten anpassen oder ändern, sobald das Karussell geladen ist.

1
Vikash Pandey

Sie können dies versuchen.

Markup

<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