Карусель Bootstrap не будет скользить при добавлении динамических данных

Question

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

// html page

 {{Form::open(array('action'=>'HomeController@show_news', 'id'=>'myform'))}}
    <div id="myCarousel" class="carousel slide" data-ride="carousel">
        <?php if (isset($news)) { $i=0; ?>
        <div class="carousel-inner">
            @foreach ($news as $row)
                <div class="item active" onclick="javascript:getimageid('{{$row->id}}')">
                    <img src="data:image/png;base64,{{base64_encode($row->img_png)}}">
                    <div class="carousel-caption">
                        <h4><a href="#">{{$row->title}}</a></h4>
                        <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod
                            tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
                        </p>
                    </div>
                </div>
            @endforeach
        </div>
        <ul class="list-group">
            @foreach ($news as $rows)
                <?php $i++ ?>
                <li data-target="#myCarousel" data-slide-to="{{$i}}" class="list-group-item">
                    <h4>{{$rows->title}}</h4>
                </li>
            @endforeach
        </ul>
        <?php } ?>
        <input name="post_id[]" id="post_id[]" type="hidden">
        <script type="text/javascript">
            function getimageid(id) {
                $('[id^=post_id]').val(id);
                document.getElementById('myform').submit();
            }
            $(window).load(function() {
                $('#myCarousel').carousel({
                    interval: 1000
                })
            });
        </script>
        <!-- Controls -->
        <div class="carousel-controls">
            <a class="left carousel-control" href="#myCarousel" data-slide="prev">
                <span class="glyphicon glyphicon-chevron-left"></span>
            </a>
            <a class="right carousel-control" href="#myCarousel" data-slide="next">
                <span class="glyphicon glyphicon-chevron-right"></span>
            </a>
        </div>
    </div>
    {{Form::close()}}

// css style

#myCarousel .carousel-caption {
    left:0;
    right:0;
    bottom:0;
    text-align:left;
    padding:10px;
    background:rgba(0,0,0,0.6);
    text-shadow:none;

}

#myCarousel .list-group {
    position:absolute;
    top:0;
    right:0;
    width: 33.5%;
}
#myCarousel .list-group-item {
    border-radius:0px;
    cursor:pointer;
}
#myCarousel .list-group .active {
    background-color:#eee;
}

@media (min-width: 992px) {
    #myCarousel {padding-right:33.3333%;}
    #myCarousel .carousel-controls {display:none;}
}
@media (max-width: 991px) {
    .carousel-caption p,
    #myCarousel .list-group {display:none;}
}

// после изменения элемента на карусель

Answer 1

Карусельный компонент ожидает один и только один активный элемент.

Попробуйте что-то вроде этого:

@foreach ($news as $index => $row)
    <div class="item <?php if ($index == 0) echo "active"; ?>" onclick="javascript:getimageid('{{$row->id}}')">

Это должно сделать первый элемент активным и скрытьдругие изображения.

---

Предыдущий ответ

Похоже, вам не хватает нескольких необходимых классов CSS.По крайней мере, вы должны добавить классы carousel и slide к элементу формы (и вам, вероятно, следует использовать div вместо контейнера form, если у вас нет веских причин для этого).Кроме того, элементы в карусели должны иметь класс carousel-item вместо item.

Замена первой строки на {{Form::open(array('action'=>'HomeController@show_news', 'id'=>'myform', 'class'=>'carousel slider'))}} и элемента item на <div class="carousel-item active" onclick="javascript:getimageid('{{$row->id}}')"> должна привести к тому, что она будет вести себя как карусель.

Постарайтесь сделать так, чтобы документация была максимально возможной.