jquery - bootstrap 3轮播异常: blank content appears when go "prev" before the 1st slider item,但只要点击 "next"就可以正常工作

Question

Bootstrap 3轮播异常无报错信息， 在第一张幻灯片之前单击上一张幻灯片时出现空白内容，但在单击下一张幻灯片时表现完全正常。

issue url

1.点击右边的 slider 会next，没有问题，循环成功。

2.单击左边缘(到达第一个 slider 元素之前)，您将看到空白(黑色)并且轮播将不起作用，但我的 chrome 控制台没有显示任何有用的调试信息。 :(

在这种情况下我无法找到原因，也不知道这是否是一个重复问题。 任何类似的问题/重复问题链接都在下面的评论中找到。

我使用的初始化代码看起来很正常

$("#myCarousel").carousel({
            interval: 15000,
            pause: true,
            cycle:true                
});

HTML carousel 部分(我使用的是 bootstrap 3 carousel，因为你可以看到甚至 id 名称都没有改变，与其演示 id 名称相同。我想我没有做太多改变。)

<div class="bs-example">

  <div id="myCarousel" class="carousel slide" data-ride="carousel">
    <!-- Carousel indicators -->
    <ol class="carousel-indicators hidden">
     <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
     <li data-target="#myCarousel" data-slide-to="1" class=""></li>
      .............................
</ol>

<!-- Carousel items -->
<div class="carousel-inner">
  <div class="carousel-nav-right-btn hidden-sm hidden-xs"></div>
  <div class='item active' style="background-image:url(http://elf.solstice.sg/tateanzur/wp-content/uploads/2014/11/slider_bg4.png);background-size:cover;background-repeat: no-repeat; background-position:center;height:100%;">
    <div class="carousel-caption">
      <h3 style="padding-top:80px;">slider caption text</h3>
      ................................ 
    </div>
  </div>
  <div class='item ' style="background-image:url(http://elf.solstice.sg/tateanzur/wp-content/uploads/2014/11/slider_bg5.png);background-size:cover;background-repeat: no-repeat; background-position:center;height:100%;">
    <div class="carousel-caption">
      <h3 style="padding-top:80px;">slider caption text</h3>
       .................................
    </div>
  </div>
</div>

<!-- Carousel nav -->
<a class="carousel-control left" href="#myCarousel" data-slide="prev">
  <span class="glyphicon glyphicon-chevron-left"></span>
</a>
<a class="carousel-control right" href="#myCarousel" data-slide="next">
  <span class="glyphicon glyphicon-chevron-right"></span>
</a>
</div>
</div>

在这个案例中有几个问题在我看来很奇怪:

1.旋转木马正常工作，右方向的loop循环工作正常，但左方向肯定有问题

2.chrome向左变黑时没有错误提示。 (我正在使用 chrome bowser，任何人都可以在其他浏览器中找到错误消息)

请原谅我没有在这里粘贴完整代码，因为我不确定完整代码的哪一部分触发了这个问题，(粘贴完整代码看起来也很乱)一旦找到问题，我将重新编辑帖子使用简短的示例代码作为此问题的原因。

Answer 1

尝试删除代码

<div class="carousel-nav-right-btn hidden-sm hidden-xs"></div>

并把你的图片作为 img src 而不是背景

    <div class="item">
      <img src="http://lorempixel.com/1500/600/abstract/1" class="img-responsive">
      <div class="container">
        <div class="carousel-caption">

        </div>
      </div>
    </div>