web-dev-qa-db-ja.com

jQueryを使用してBootstrap 3カルーセルに動的にスライドを追加

JQueryを使用してBootstrapカルーセルにスライドを追加しようとしていますが、ブラウザでスライダーとして機能していません。代わりに、リストビューで画像を表示しています。

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

まず、mが画像の適切なURLを持つ配列であるという事実に依存します。

HTMLは次のようになります。

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

クラスカルーセルの内部は空です。次に、カルーセルのイメージを配置する場所があります。

クラスカルーセル指標も空であり、JSによって入力されます。

次に、JSが来ます（私が言ったように、Imはimgs urlの配列であるという事実に依存しています）

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

基本的に、すべての画像をカルーセル内部クラスに追加し、カルーセル制御liを追加してから、アクティブなクラスを最初の画像と最初のカルーセルインジケーターliに追加し、最後にカルーセルを初期化します。これはすべて、ドキュメントの準備ができている関数、これはあなたが不足しているものですの中にあることに注意してください。あなたがすることは、onloadという関数を定義することだけです

それが役に立てば幸い ！

編集：altタグも画像に出力しているのを見ましたが、それは私の答えに含まれる必要のないものです。問題なくそれを行うことができると思います。

38
avcajaraville

まあ、Bootstrap Carouselには制御するためのさまざまなパラメーターがあります。

つまり.

Interval：各スライド間の遅延（ミリ秒単位）を指定します。

pause：マウスポインターがカルーセルに入ったときにカルーセルが次のスライドを通過するのを一時停止し、マウスポインターがカルーセルを離れるとスライドを再開します。

wrap：カルーセルがすべてのスライドを連続して通過するか、最後のスライドで停止するかを指定します

ご参考までに：

parameters of carousel

詳細については ここをクリックしてください...

これがあなたを助けることを願っています:)

注：これはさらなるヘルプのためです。

1
Vikash Pandey

これを試してみることができます。

マークアップ

<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