Question

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

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

//将项目更改为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'))}}。

将第一行替换为<div class="carousel-item active" onclick="javascript:getimageid('{{$row->id}}')">，将item元素替换为<PropertyGroup> <RestoreProjectStyle>PackageReference</RestoreProjectStyle> <AutoGenerateBindingRedirects>true</AutoGenerateBindingRedirects> <GenerateBindingRedirectsOutputType>true</GenerateBindingRedirectsOutputType> </PropertyGroup>，使其行为就像轮播一样。

尽量让它看起来尽可能像the documentation。

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

1 个答案:

上一个答案