添加动态数据时，Bootstrap 轮播不会滑动

Question

我从数据库中添加了数据，但它们单独显示，不会按应有的方式更改或滑动。我尝试使用一些 JavaScript，但无法使其工作。如果我在课堂上使用轮播项目，情况会变得更糟。因此，当他们使用 item 时，我正在关注此链接。下面是一张图片，向您展示我正在尝试实现的内容。

//html页面

 {{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样式

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

//将item改为carousel-item后

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}}')"> 应该使其表现得像一个轮播。

尽量让它看起来像the documentation。