时间戳

首页 > 解决方案 > 手机轮播bug

javascript - 手机轮播bug

问题描述

我对 Bootstrap v4.0 Carousel 有一个无法解决的问题，我在网上查找了类似的问题，但似乎没有发现任何令人困惑的问题。

在 iPhone 上加载页面时，如果单击指示器或使用自动滑动，轮播会在任何情况下滑动两次相同的图像。请看下面的代码。下面还附有一个 Heroku 链接，因此您也可以在手机上检查问题（请注意，我没有在 Android 设备上检查过，因为我没有自己的设备）

<div id="carouselExampleIndicators" class="carousel slide">
  <ol class="carousel-indicators">
    <li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>
    <li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
    <li data-target="#carouselExampleIndicators" data-slide-to="2"></li>
  </ol>
  <div class="carousel-inner">
    <div class="carousel-item active">
      <img class="d-block w-100" src="https://scontent.fltn2-1.fna.fbcdn.net/v/t1.0-9/97087554_10157568429427872_2295505830386073600_n.jpg?_nc_cat=101&_nc_sid=dd9801&_nc_ohc=EKpvsglOk3IAX9Py33W&_nc_ht=scontent.fltn2-1.fna&oh=fb94e49d41d443272c2507f8b1759f46&oe=5EECA22E" alt="First slide">
        <div class="carousel-caption d-none d-md-block">
    <h5>Benvenuto allo Studio Odontoiatrico Associato Dr. M. e M. Licata</h5>
  </div>
    </div>
    <div class="carousel-item">
      <img class="d-block w-100" src="https://scontent.fltn2-1.fna.fbcdn.net/v/t1.0-9/s960x960/99289016_10157586004457872_3467314234633748480_o.jpg?_nc_cat=102&_nc_sid=8024bb&_nc_ohc=fIZBMtey49YAX_5ayAc&_nc_ht=scontent.fltn2-1.fna&_nc_tp=7&oh=05fcf2eb72e639ae9092bcd7ad20a811&oe=5EEA0C36" alt="Second slide">
        <div class="carousel-caption d-none d-md-block">
    <h5>Chi Siamo <a href="/staff" class="btn btn-primary btn-sm"> Vai &raquo;</a></h5>

  </div>
    </div>
    <div class="carousel-item">
      <img class="d-block w-100" src="https://scontent.fltn2-1.fna.fbcdn.net/v/t1.0-9/p720x720/98180802_10157586032592872_239014732453904384_o.jpg?_nc_cat=110&_nc_sid=8024bb&_nc_ohc=sMMh-yGOJtYAX8RUyro&_nc_ht=scontent.fltn2-1.fna&_nc_tp=6&oh=7479cde50b0b49b927dd9bd01a59198f&oe=5EEC6724" alt="Third slide">
        <div class="carousel-caption d-none d-md-block">
    <h5>Dove Siamo <a href="/contacts" class="btn btn-primary btn-sm"> Vai &raquo;</a></h5>

  </div>
    </div>
  </div>
  <a class="carousel-control-prev" href="#carouselExampleIndicators" 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="#carouselExampleIndicators" role="button" data-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="sr-only">Next</span>
  </a>
</div>

https://studio-licata-test.herokuapp.com/

标签： javascriptjquerycssbootstrap-4carousel

解决方案

我发现了这个问题。不知道我怎么会错过它，但我只是删除了引导程序的 cdn 并再次链接它们，它似乎工作正常。

推荐阅读