Добавление слайдов в бутстрап 3 карусели динамически с помощью jQuery

Я пытаюсь добавить слайды в карусель Bootstrap с помощью jQuery, но он не действует как слайдер в браузере. Вместо этого он показывает изображения в виде списка.

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

Ответы

Ответ 1

Во-первых, я буду полагаться на то, что 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 полагается на то, что m является массивом 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. И, наконец, вы инициализируете свою карусель. Обратите внимание, что все это находится внутри функции document ready, что вам не хватает. То, что вы делаете, определяет только функцию, называемую onload

Надеюсь, что это поможет!

EDIT: Я видел, что вы выставляете также тег alt для изображений, но это то, на что мне не нужно отвечать, я готов поспорить, что вы можете сделать это без проблем.

Ответ 2

Ну, Bootstrap Carousel имеет различные параметры для управления.

то есть.

Интервал: Задает задержку (в миллисекундах) между каждым слайдом.

пауза: Приостановка карусели через следующий слайд, когда указатель мыши входит в карусель, и возобновляет скольжение, когда указатель мыши покидает карусель.

wrap: Указывает, должна ли карусель проходить через все слайды непрерывно или останавливаться на последнем слайде

Для справки:

параметры карусели

Для более подробной информации нажмите здесь...

Надеюсь, это поможет вам:)

Примечание: это для дальнейшей помощи.. Я имею в виду, как вы можете настроить или изменить поведение по умолчанию после загрузки карусели.

Ответ 3

Вы можете попробовать это.

наценка

<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>';
}