Php 滑块中图像之间的空格

我正在用laravel制作一个动态滑块。我需要滑动数据库中的内容和图像。一切都很好，但我的幻灯片之间有一个空白。第一张图片是带内容的幻灯片，第二张是空白的，第三张图片是空白的，第三张图片是空白的

我在数据库和文件夹中有两个图像。图像应该频繁地一张接一张地滑动，但这种情况不会发生。 我的if-else语句可能有错误

我的slider的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元素以查看哪个元素占用了空白，然后使用css设置边距：0

我也有同样的问题， 当我想到解决方案时，我已经用css文件编写了代码

.next,.prev{
display: none !important;  
}

---

问候

A会更有帮助。根据您的代码，我只能估计col-md-x的填充可能会导致空白。@vivekkupadhyay我现在应该做什么…首先创建一个JSFIDLE，它将帮助其他SO用户纠正您的问题。看起来您正在为每个循环渲染2个项目容器。您可能只想要一个，但鉴于问题的详细程度，很难判断我的查询在控制器中是这样的：$query:DB:：table'services'->get；