html 旋转架不能正常滑动

velaa5lx 于 2022-12-09 发布在其他

关注(0)|答案(1)|浏览(115)

我复制了 Bootstrap 5旋转木马代码，并做了一些补充，但由于某种原因，它不工作（好吧，它做了，但非常奇怪）例如，它只去第2张幻灯片，然后它停止，但当我按下f12，并去检查元素它开始工作。有时它甚至不去第2张幻灯片。
这是我的HTML代码

<!-- Image Carousel -->
    <div id=".Carousel" class="carousel pt-5 slide bg-dark" data-bs-touch="false" data-bs-ride="carousel">
        <div class="carousel-inner">
            <div class="carousel-item active" data-bs-interval="5000">
                <div class="ratio ratio-21x9"><img src="../FrontEnd/Images/Home/MainPicture.jpeg" class="ratio pt-3 ratio-16x9 d-block w-100"alt="Main Picture">
                </div>
            </div>
            <div class="carousel-item" data-bs-interval="5000">
                <div class="ratio ratio-21x9"><img src="../FrontEnd/Images/Home/BiliardBar.jpeg"class="ratio pt-3 ratio-16x9 d-block w-100" alt="Billiard And Bar">
                </div>
            </div>
            <div class="carousel-item" data-bs-interval="5000">
                <div class="ratio ratio-21x9"><img src="../FrontEnd/Images/Home/Darts.jpeg"class="ratio pt-3 ratio-16x9 d-block w-100" alt="Darts">
                </div>
            </div>
        </div>
    </div>
    <!-- End of Image Carousel -->

最后我想提一下我的css文件，我没有任何可能会潜在地损害我的旋转木马的工作方式。但我有一个导航栏在我的旋转木马顶部与Z-Index: 2;（旋转木马有1），但我试图删除它，我的旋转木马仍然窃听。
我试着在谷歌上搜索一些答案，但似乎没有什么工作，我发现一些代码说，这：

<script>$(window).load(function () { $('.Carousel').carousel() })</script>

应该使旋转木马项目交换之间的 Flink 动画消失，但我不知道如果我用它的权利，因为我从来没有与javascript工作（我有这个在我的页面顶部）

Html

来源：https://stackoverflow.com/questions/74722459/carousel-acting-not-sliding-as-it-should

1条答案

按热度按时间

k5ifujac1#

我建议您将此代码段用于carousel

<div id="carouselExampleControls" class="carousel slide" data-bs-ride="carousel">
  <div class="carousel-inner">
    <div class="carousel-item active">
      <img src="..." class="d-block w-100" alt="...">
    </div>
    <div class="carousel-item">
      <img src="..." class="d-block w-100" alt="...">
    </div>
    <div class="carousel-item">
      <img src="..." class="d-block w-100" alt="...">
    </div>
  </div>
  <button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleControls" data-bs-slide="prev">
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
    <span class="visually-hidden">Previous</span>
  </button>
  <button class="carousel-control-next" type="button" data-bs-target="#carouselExampleControls" data-bs-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="visually-hidden">Next</span>
  </button>
</div>

不要忘记填充图像的src属性

赞(0）回复(0）举报 2022-12-09

我来回答

html 旋转架不能正常滑动

1条答案

相关问题

热门标签

最新问答