Question

我无法一个接一个地在滑块中显示图像，它会一次显示所有图像。我的静态代码在这里，它适用于滑动图像。

    <section id="main-slider" class="no-margin" data-ride="carousel">
    <div class="carousel slide">
        <ol class="carousel-indicators">
            <li data-target="#main-slider" data-slide-to="0" class="active"></li>
            <li data-target="#main-slider" data-slide-to="1"></li>
            <li data-target="#main-slider" data-slide-to="2"></li>
        </ol>
        <div class="carousel-inner">

            <div class="item active" style="background-image: url(users/assets/images/New/4.jpg)">
                <div class="container">
                    <div class="row slide-margin">

                        <div class="col-sm-12">
                            <div class="media services-wrap wow fadeInDown">
                                <div class="pull-left">
                                    <img class="img-responsive" src="images/services/services1.png">
                                </div>
                                <div class="media-body">
                                    <h3 class="media-heading">SEO Marketing</h3>
                                    <p>Lorem ipsum dolor sit ame consectetur adipisicing elit</p>
                                </div>
                            </div>
                        </div>

                    </div>
                </div>
            </div><!--/.item-->


        </div><!--/.carousel-inner-->
    </div><!--/.carousel-->
    <a class="prev hidden-xs" href="#main-slider" data-slide="prev">
        <i class="fa fa-chevron-left"></i>
    </a>
    <a class="next hidden-xs" href="#main-slider" data-slide="next">
        <i class="fa fa-chevron-right"></i>
    </a>
</section><!--/#main-slider-->

当我将其设为动态时，它不是滑动图像，而是显示来自数据库的所有图像

<section id="main-slider" class="no-margin" data-ride="carousel">
<div class="carousel slide">
    <ol class="carousel-indicators">
        <li data-target="#main-slider" data-slide-to="0" class="active"></li>
        <li data-target="#main-slider" data-slide-to="1"></li>
        <li data-target="#main-slider" data-slide-to="2"></li>
    </ol>
    <div class="carousel-inner">

        <div class="item active" style="background-image: url(users/assets/images/New/4.jpg)">
            <div class="container">
                <div class="row slide-margin">


        <div class="col-md-12">
            <div class="media services-wrap wow fadeInDown">
                @foreach($data as $data)
                <img src="{{asset($data->image)}}">
                <h4>{{ $data->text}}</h4>
                @endforeach
            </div>
        </div>

                </div>
            </div>
        </div><!--/.item-->


    </div><!--/.carousel-inner-->
</div><!--/.carousel-->
<a class="prev hidden-xs" href="#main-slider" data-slide="prev">
    <i class="fa fa-chevron-left"></i>
</a>
<a class="next hidden-xs" href="#main-slider" data-slide="next">
    <i class="fa fa-chevron-right"></i>
</a>

我如何逐个滑动图像

Answer 1

尝试将此div放在Foreach循环“<div class="item"></div>”中。

看起来.item课程将作为每张幻灯片。

检查此链接，例如..

http://jsfiddle.net/WmMXa/3/

希望有所帮助

Answer 2

将foreach放在轮播项目之前，并添加此代码class = $loop->first ? 'active' : ''，该代码将仅使第一张照片与静态代码一样处于活动状态。

@foreach( $photos as $photo )
   <div class="carousel-item {{ $loop->first ? 'active' : '' }}">
       <img class="d-block img-fluid" src="{{ $photo->image }}" alt="{{ $photo->title }}">
          <div class="carousel-caption d-none d-md-block">
             <h3>{{ $photo->title }}</h3>
             <p>{{ $photo->descriptoin }}</p>
          </div>
   </div>
@endforeach`

希望它会为您服务。

Laravel中的滑块

2 个答案: