时间戳

首页 > 解决方案 > Bootstrap 4.1 轮播指示器

bootstrap-4 - Bootstrap 4.1 轮播指示器

问题描述

我正在使用 bootstrap 4.1 的最新版本

我正在尝试使用轮播指示器。

但是当我尝试按下我的一个指标时。

它不工作。

我不想使用：“carousel-control-prev”“carousel-control-nextx”

这是我的代码：

<section class="slider">
    <div id="sitebanners" class="carousel slide" data-ride="carousel">
        <ol class="carousel-indicators">
            <li data-target="#sitebanners" data-slide-to="0" class="active"></li>
            <li data-target="#sitebanners" data-slide-to="1" class=""></li>
            <li data-target="#sitebanners" data-slide-to="2" class=""></li>
        </ol>
        <div class="carousel-inner">
            <div class="carousel-item active">
                <img src="images/banner1.jpg" alt="First slide"/>
                <div class="carousel-caption">
                    <h5 class="title">get your stylish</h5>
                    <h5 class="sub_title">look today</h5>
                    <p>Make your hairstyle an important part for the expression of your identity! Our licensed hair
                        dressers will make sure you get the exact style you want!</p>
                    <a href="#">Learn More</a>
                </div>
            </div>
            <div class="carousel-item">
                <img src="images/banner2.jpg" alt="Second slide"/>
                <div class="carousel-caption">
                    <h5 class="title">premier esthetics</h5>
                    <h5 class="sub_title">services</h5>
                    <p>Premier Esthetics offers various treatments to enhance the natural beauty of your skin while
                        targeting areas of concern to achieve optimal results.</p>
                    <a href="#">Learn More</a>
                </div>
            </div>
            <div class="carousel-item">
                <img src="images/banner3.jpg" class="img-fluid" alt="Third slide"/>
                <div class="carousel-caption">
                    <h5 class="title">ultimate experience</h5>
                    <h5 class="sub_title">in hair care</h5>
                    <p>Highlights are always trendy! From just a Sun Kiss to Platinum Blonde we can transform the way
                        your hair looks and make it shiny!</p>
                    <a href="#">Learn More</a>
                </div>
            </div>
        </div>
    </div>
</section>

我尝试了很多方法。

但没有任何作用

谢谢！

标签： bootstrap-4

解决方案

您的代码似乎是正确的。我在包装器周围添加了一些填充并给它一个深色背景，但除此之外它与您的代码相同。下面的示例显示了它的工作原理，因此在您的代码中的其他地方肯定有其他东西干扰了您的指标函数。

不想听起来很滑稽，但是您是否包含了 Bootstrap JS 文件？

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

<div class="container-fluid" style="background-color: rgba(0,0,0,0.7); padding: 30px;">

  <section class="slider">
    <div id="sitebanners" class="carousel slide" data-ride="carousel">
      <ol class="carousel-indicators">
        <li data-target="#sitebanners" data-slide-to="0" class="active"></li>
        <li data-target="#sitebanners" data-slide-to="1" class=""></li>
        <li data-target="#sitebanners" data-slide-to="2" class=""></li>
      </ol>

      <div class="carousel-inner">
        <div class="carousel-item active">
          <img src="images/banner1.jpg" alt="First slide" />
          <div class="carousel-caption">
            <h5 class="title">get your stylish</h5>
            <h5 class="sub_title">look today</h5>
            <p>Make your hairstyle an important part for the expression of your identity! Our licensed hair dressers will make sure you get the exact style you want!</p>
            <a href="#">Learn More</a>
          </div>
        </div>

        <div class="carousel-item">
          <img src="images/banner2.jpg" alt="Second slide" />
          <div class="carousel-caption">
            <h5 class="title">premier esthetics</h5>
            <h5 class="sub_title">services</h5>
            <p>Premier Esthetics offers various treatments to enhance the natural beauty of your skin while targeting areas of concern to achieve optimal results.</p>
            <a href="#">Learn More</a>
          </div>
        </div>

        <div class="carousel-item">
          <img src="images/banner3.jpg" class="img-fluid" alt="Third slide" />
          <div class="carousel-caption">
            <h5 class="title">ultimate experience</h5>
            <h5 class="sub_title">in hair care</h5>
            <p>Highlights are always trendy! From just a Sun Kiss to Platinum Blonde we can transform the way your hair looks and make it shiny!</p>
            <a href="#">Learn More</a>
          </div>
        </div>

      </div>

    </div>
  </section>
</div>

<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>

推荐阅读