滑块中图像之间的空白空间答案

【问题标题】：Blanks space between images in slider滑块中图像之间的空白空间
【发布时间】：2015-12-17 16:54:55
【问题描述】：

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

【问题讨论】：

JSFiddle 会更有帮助。根据您的代码，我只能估计col-md-x 中的padding 可能会导致空白。
@vivekkupadhyay 我现在该怎么办...
首先创建一个 JSFiddle 来帮助其他 SO 用户解决您的问题。
看起来您在每个循环中渲染 2 个项目容器。您可能只想要一个，但考虑到您问题的详细程度，很难说清楚
我的查询在控制器中是这样的 :$query:DB::table('services')->get();

标签： php jquery html css laravel

【解决方案1】：

您的某个元素很可能有一些不需要的边距。尝试右键单击并点击检查元素以查看哪个元素占用了空白，然后使用 css 设置 margin:0;

【讨论】：

【解决方案2】：

我也遇到了同样的问题，当我想出解决方案时，我有带有代码的 css 文件

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

问候

【讨论】：