我正在用laravel制作一个动态滑块。我需要幻灯片的内容和图像是在数据库中。一切都很好,但是幻灯片之间有空白。第一张图片是有内容的,第二张是空白的,在第三张图片之后,第三张图片之后是空白页。
我有两个图像在数据库和文件夹。图像应该经常一个接一个地滑动,但这并没有发生。我可能在我的if
else
声明中有一个错误。
我的HTML代码滑块是这样的,它工作得很好
<section>
<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
<li data-target="#carousel-example-generic" data-slide-to="1"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">
<div class="item active">
<div class="bnr-img">
<img src="css/images/banner.jpg" alt="..." style="width:100%;">
<div class="carousel-caption">
Group com Family Hospitalization<br> Insurance
</div>
</div>
<h1>"We will be there when you need us most"</h1>
</div>
<div class="item">
<div class="bnr-img">
<img src="css/images/bnr-medi.jpg" alt="..." style="width:100%;">
<div class="carousel-caption">
Health Insurance
</div>
</div>
<h1>"Securing Your Health"</h1>
</div>
</div>
<!-- Controls -->
<a class="left carousel-control arw1" href="#carousel-example-generic" role="button" data-slide="prev">
<img src="css/images/arw-left.png" class="img-responsive">
</a>
<a class="right carousel-control arw1" href="#carousel-example-generic" role="button" data-slide="next">
<img src="css/images/arw-right.png" class="img-responsive">
</a>
</div>
</section><!--Slider end-->
动态滑块的代码是这样的:
<h2>services</h2>
<div id="carousel-example-generic1" class="carousel slide" data-ride="carousel">
<!-- Wrapper for slides -->
<div class="carousel-inner inner" role="listbox">
@if(isset($services))
@foreach($services as $service)
<div class="item active">
</div>
<div class="item">
<div class="col-md-4">
<img src="frontend/services/{{$service->image}}">
</div>
<div class="col-md-8">
<p>
<span class="hilights2">{{$service->title}}</span><br>
{{$service->description}}
<a href="services-polices/{{$service->id}}" class="link">Read More</a>
</p>
</div>
</div>
@endforeach
@endif
</div>
<!-- Controls -->
很可能你的某个元素上有一些不需要的边距。尝试右击并点击inspect element查看哪个元素占用了空白,然后使用css设置margin:0;
我也遇到过同样的问题,当我想到解决方案时,它是我的css文件代码
.next,.prev{
display: none !important;
}
对