Laravel 中的滑块
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/36465554/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Sliders in Laravel
提问by James Sachi
I am not able to show images in slider one by one, it displays all images at once. My static code is here and it works well with sliding images.
我无法在滑块中一一显示图像，它会一次显示所有图像。我的静态代码在这里，它适用于滑动图像。
<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-->
When i made it dynamic it is not sliding images, but displaying all images from database
当我使它动态时，它不是滑动图像，而是显示数据库中的所有图像
<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>
How can i slide image one by one
如何一张一张的滑动图片
回答by Vishal Tarkar
Try put this div in Foreach loop '<div class="item"></div>'.
尝试将此 div 放在 Foreach 循环“ <div class="item"></div>”中。
As It seems .itemclass will work as each slide.
似乎.item课堂将作为每张幻灯片工作。
Check this link for example..
例如检查此链接..
Hope it helps
希望能帮助到你
回答by Juan Carlos Ibarra
Put the foreach before your carousel-item and add this code class = $loop->first ? 'active' : ''that will put only the first photo as active as your static code does.
将 foreach 放在 carousel-item 之前并添加此代码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`
Hopefully, it will works for you.
希望它对你有用。
