在滑块中空白图像之间的空间


Blanks space between images in slider

我正在用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;  
}