Question

我正在制作带有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 -->

Answer 1

您的某个元素很可能会有一些不必要的保证金。尝试右键单击并点击inspect元素以查看哪个元素占用空格，然后使用css设置margin：0;

Answer 2

我遇到了同样的问题，当我找到解决方案时，我的css文件包含代码

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

此致

在滑块中的图像之间留空

2 个答案: