jquery - Bootstrap 轮播图像停止一秒钟

标签 jquery css twitter-bootstrap carousel

我正在使用 Bootstrap Carousel,一切都很好,直到从最后一张图片滑动到第一张图片。当显示第一张图片时,第三张的结尾仍然在第一张上。你可以在这个地址上查看:

https://youtu.be/cRb_cujsbBY

我的轮播代码:

<div id="myCarousel" class="carousel slide container" data-ride="carousel">
    <ol class="carousel-indicators">
      <li data-target="#myCarousel" data-slide-to="0" class="active" ></li>
      <li data-target="#myCarousel" data-slide-to="1"></li>
      <li data-target="#myCarousel" data-slide-to="2"></li>
    </ol>
    <div class="carousel-inner">
      <div class="carousel-item active">
        <img class="first-slide" src="/zrodla/zdjecia/baner-reklamowy.jpg" alt="First slide">
          <div class="carousel-caption text-right">
            <h1 class="elo2">Ubezpieczenie OC i AC samochodu</h1>
            <p class="ps3">Czas wyruszyć w drogę..</p>
          </div>
      </div>
      <div class="carousel-item">
        <img class="second-slide" src="/zrodla/zdjecia/baner2.jpg" alt="Second slide">
          <div class="carousel-caption text-right">
            <h1 class="elo2" >Życie to najcenniejszy dar</h1>
            <p class="ps3">Zadbaj o nie</p>
          </div>
      </div>
      <div class="carousel-item">
        <img class="third-slide" src="/zrodla/zdjecia/baner3.jpg" alt="Third slide">
          <div class="carousel-caption text-right">
            <h1 class="elo2">Wszędzie dobrze ale w domu najlepiej </h1>
            <p class="ps3">Pakiet majątkowy z pewnością spełni twoje oczekiwania</p>
          </div>

      </div>
    </div>
    <a class="carousel-control-prev" href="#myCarousel" role="button" data-slide="prev">
      <span class="carousel-control-prev-icon" aria-hidden="true"></span>
      <span class="sr-only">Previous</span>
    </a>
    <a class="carousel-control-next" href="#myCarousel" role="button" data-slide="next">
      <span class="carousel-control-next-icon" aria-hidden="true"></span>
      <span class="sr-only">Next</span>
    </a>
  </div> 

最佳答案

尝试添加 style="width:100%;在每个 <img> 的末尾标签

像这样:

 <div class="carousel-item active">
    <img class="first-slide" src="/zrodla/zdjecia/baner-reklamowy.jpg" alt="First slide" style="width:100%;">
      <div class="carousel-caption text-right">
        ...
      </div>
  </div>

关于jquery - Bootstrap 轮播图像停止一秒钟,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/48664930/

相关文章:

jquery - 页面响应时隐藏 Bootstrap 下拉菜单

javascript - 无法从 NodeList 获取值?

jquery - .html() 和 .load() 之间的区别

javascript - 如何检测 HTML 中被覆盖的相邻元素上的鼠标事件

html - 浏览器中的 CSS 高度大小

html - 如何在 CSS 中将标签与 div 的 "BOTTOM"对齐?

javascript - 在按键功能上未检测到输入按键

javascript - js 不工作时返回 false

javascript - 每次刷新浏览器时,禁用使图像居中的幻灯片插件中的功能?

twitter-bootstrap - 如何在现有的 AngularJS 应用程序中包含 Angular-Bootstrap?