Bootstrap3 Carousel Продукт не работает должным образом

Question

У меня есть некоторые проблемы в Bootstrap3 Carousel, которые я нашел на here
Я использую Bootstrap3, выход я имею только одно изображение одновременно.

Html

<div class="container img-responsive" style="background: #d9e5e9; 
padding-left: -0px; padding-bottom: 10px; padding-top: 10px; margin: 20px auto; width: 980px;"> 
    <div class="carousel slide" id="myCarousel"> 
    <div class="carousel-inner"> 
    <div class="item active"> 
    <div class="col-xs-3"> 
    <a href="#"><img src="~/images/contact.png" class="img-responsive"></a></div> 
    </div> 
    <div class="item"> 
    <div class="col-xs-3"> 
    <a href="#"><img src="~/images/contact1.png" class="img-responsive"></a></div> 
    </div> 
    <div class="item"> 
    <div class="col-xs-3"> 
    <a href="#"><img src="~/images/contact2.png" class="img-responsive"></a></div> 
    </div> 
    </div> 
    <a class="left carousel-control" href="#myCarousel" data-slide="prev"> 
<i class="glyphicon glyphicon-chevron-left"> 
    </i></a> 
    <a class="right carousel-control" href="#myCarousel" data-slide="next"> 
    <i class="glyphicon glyphicon-chevron-right"></i></a> 
    </div> 
    </div> 

Сценарий и стиль

<style> 
    .carousel-inner .active.left { 
     left: -25%; 
    } 

    .carousel-inner .next { 
     left: 25%; 
    } 

    .carousel-inner .prev { 
     left: -25%; 
    } 

    .carousel-control { 
     width: 4%; 
    } 

     .carousel-control.left, .carousel-control.right { 
      margin-left: 15px; 
      background-color: #036ca6; 
     } 
</style> 
    <script> 
     $(document).ready(function() { 
      $('#myCarousel').carousel({ 
       interval: 4000 
      }) 

      $('.carousel .item').each(function() { 
       var next = $(this).next(); 
       if (!next.length) { 
        next = $(this).siblings(':first'); 
       } 
       next.children(':first-child').clone().appendTo($(this)); 

       for (var i = 0; i < 2; i++) { 
        next = next.next(); 
        if (!next.length) { 
         next = $(this).siblings(':first'); 
        } 

        next.children(':first-child').clone().appendTo($(this)); 
       } 
      }); 
     }); 
    </script> 

Проблема заключается только в том, что она показывает одно изображение в то время, но он должен показать 4 изображения ,
Что я делаю неправильно?

Answer 1

Прежде всего, я бы проверял, чтобы вы правильно включили все необходимые скрипты и таблицы стилей, необходимые для запуска бутстрапа. Это должно включать по меньшей мере <link rel="stylesheet" href="boostrap.css"> и <script type="text/javascript" src="bootstrap.js"></script>. Я связался с CDN ниже, если вы не хотите их локально хранить.

Если это не проблема, посмотрите на свой цикл for и убедитесь, что он настроен на запуск достаточно времени, чтобы добавить всех детей. Сейчас он будет работать только дважды.

Наконец, проверьте свой html. Вы сказали, что хотите отобразить четыре изображения, но у вас есть только три.

Bootstrap CSS & JS CDN: http://www.bootstrapcdn.com/

JQuery CDN (вы, вероятно, хотите, это тоже): http://code.jquery.com