时间戳

首页 > 解决方案 > Bootstrap Carousel 一次显示所有图像（HTML）

html - Bootstrap Carousel 一次显示所有图像（HTML）

问题描述

目前我正在尝试在我正在制作的网站上实现轮播，但是图像全部加载在彼此之上，并且没有轮播控件。下面是我的代码。这段代码实际上是从我制作的另一个网站复制和粘贴的，它可以正常工作。提前感谢所有帮助。

<div class="container" style="padding-top: 80px;">
    <div id="slides" class="carousel slide" data-ride="carousel" >
        <ol class="carousel-indicators">
         <li data-target="#slides" data-slide-to="0" class="active"></li>
         <li data-target="#slides" data-slide-to="1"></li>
         <li data-target="#slides" data-slide-to="2"></li>
        </ol>
        <div class="carousel-inner">
            <div class="carousel-item active">
         <img class="d-block mx=auto" src="images/villager.png"  alt="Villager">
       </div>
         <div class="carousel-item">
              <img class="d-block mx=auto" src="images/vault.png"  alt="Man">
         </div>
            <div class="carousel-item">
              <img class="d-block mx=auto" src="images/dragonborn.jpg"  alt="Skyrim">
         </div>
         </div>
             <a class="carousel-control-prev" href="#slides" 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="#slides" role="button" data-slide="next">
            <span class="carousel-control-next-icon" aria-hidden="true"></span>
        <span class="sr-only">Next</span>
        </a>
        </div>

这是页面如何显示轮播的图像 这是页面如何显示轮播的图像

标签： htmlcss

解决方案

问题是

这段代码实际上是从我制作的另一个网站复制和粘贴的，它可以正常工作。

所以你只需复制没有 CSS 的 HTML ......所以也复制 CSS。

该网站可能使用bootstrap 4链接。你应该修改mx=auto.mx-auto

推荐阅读