HTML中利用bootstrap的轮播示例代码

    <!-- 轮播 -->
    <div id="demo" class="carousel slide" data-bs-ride="carousel">

      <!-- Indicators/dots -->
      <div class="carousel-indicators">
        <button type="button" data-bs-target="#demo" data-bs-slide-to="0" class="active"></button>
        <button type="button" data-bs-target="#demo" data-bs-slide-to="1"></button>
        <button type="button" data-bs-target="#demo" data-bs-slide-to="2"></button>
        <button type="button" data-bs-target="#demo" data-bs-slide-to="3"></button>
        <button type="button" data-bs-target="#demo" data-bs-slide-to="4"></button>
        <button type="button" data-bs-target="#demo" data-bs-slide-to="5"></button>

      </div>

      <!-- 幻灯片/轮播 -->
      <div class="carousel-inner">
        <div class="carousel-item active">
            <div class="image-with-text d-flex justify-content-center">
                <a href="aipw/" target="_blank" >
                    <img src="{% static 'app1/img/carousel/平行世界.jpg' %}" alt="平行世界" class="d-block w-100 ">
                    <span class="text-overlay">AI平行世界</span>
                </a>
            </div>
        </div>
        <div class="carousel-item">
            <div class="image-with-text d-flex justify-content-center">
                <a href="aipw/" target="_blank">
                    <img src="{% static 'app1/img/carousel/个人简历网站.png' %}" alt="个人网站" class="d-block w-100">
                    <span class="text-overlay text-warning">个人简历网站</span>
                </a>
            </div>
        </div>
        <div class="carousel-item">
            <div class="image-with-text d-flex justify-content-center">
                <a href="aipw/" target="_blank">
                    <img src="{% static 'app1/img/carousel/AI绘画.jpg' %}" alt="AI绘画" class="d-block w-100">
                    <span class="text-overlay text-primary">AI绘画</span>
                </a>
            </div>
        </div>
        <div class="carousel-item">
            <div class="image-with-text d-flex justify-content-center">
                <a href="https://www.apple.com/" target="_blank">
                    <img src="{% static 'app1/img/carousel/apple.png' %}" alt="苹果官网" class="d-block w-100">
                    <span class="text-overlay text-warning">苹果官网-</span>
                </a>
            </div>
        </div>

        <div class="carousel-item">
            <div class="image-with-text d-flex justify-content-center">
                <a href="aipw/" target="_blank">
                    <img src="{% static 'app1/img/carousel/大型网络设计建设.jpg' %}" alt="网络设计" class="d-block w-100">
                    <span class="text-overlay text-warning">网络设计</span>
                </a>
            </div>
        </div>
        <div class="carousel-item ">
            <div class="image-with-text d-flex justify-content-center">
                <a href="aipw/" target="_blank">
                    <img src="{% static 'app1/img/carousel/简洁大气响应式化妆品生物科技公司网站.jpg' %}" alt="生物科技公司" class="d-block w-100">
                    <span class="text-overlay text-primary">生物科技公司</span>
                </a>
            </div>
        </div>

      </div>

      <!-- 左右控件/图标 -->
      <button class="carousel-control-prev" type="button" data-bs-target="#demo" data-bs-slide="prev"  >
        <span class="carousel-control-prev-icon bg-primary"></span>
      </button>
      <button class="carousel-control-next" type="button" data-bs-target="#demo" data-bs-slide="next">
        <span class="carousel-control-next-icon bg-primary"></span>
      </button>
    </div>