添加 Bootstrap 轮播组件的问题答案

【问题标题】：Problem on adding Bootstrap carousel component添加 Bootstrap 轮播组件的问题
【发布时间】：2019-01-19 23:57:26
【问题描述】：

我正在练习和学习引导程序，此时我正在尝试在我的网站中添加轮播。

我从 Bootstrap 中选择了一个示例，该示例在第一个 DIV 上具有 id="carouselExampleSlidesOnly"，使用此 ID，轮播可以完美运行。

但我想删除“carouselExampleSlidesOnly”并更改为另一个 ID 名称。当我更改为“myCarousel”时，代码停止工作。

我尝试添加带有 ID 名称的 javascript 代码，但即使这样，轮播也无法工作，并显示静态图像。

<script>
$('#myCarousel').carousel({
  interval: 3000,
  pause: null,
})
</script>

   <div id="myCarousel" class="carousel slide" data-ride="carousel" data-interval="3000" data-pause="null">
    <div class="carousel-inner">
        <div class="carousel-item active">
            <img class="d-block w-100" src="assets/images/slide1.png" alt="First slide">
            <div class="container">
                <div class="slider-text">
                    <h2>Lorem Ipsum is simply dummy text.</h2>
                    <p>ndustry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer.</p>
                </div>

            </div>
        </div>

        <div class="carousel-item">
            <img class="d-block w-100" src="assets/images/slide2.png" alt="Second slide">
            <div class="container">
                <div class="slider-text">
                    <h2>Lorem Ipsum is simply dummy text.</h2>
                    <p>ndustry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer.</p>
                </div>

            </div>
        </div>

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

【问题讨论】：

您好，我看不出您需要什么帮助，您能再解释一下吗？您正在尝试做什么，什么不起作用？
这是一个代码笔，这是您想要实现的目标吗？ codepen.io/anon/pen/qLeoqQ?editors=1111
是的，就是这样！谢谢。

标签： bootstrap-4 bootstrap-carousel

【解决方案1】：

我相信你遇到的问题是

$('#myCarousel').carousel({
  interval: 3000,
  pause: null,
})

当它需要一个字符串或布尔值时，您将 null 作为参数传递，您可以从控制台看到此错误。

(Ctrl + shift + I) 在 Chrome 上

应该是

$('#myCarousel').carousel({
  interval: 3000,
  pause: false,
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.bundle.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" rel="stylesheet"/>

<div id="myCarousel" class="carousel slide" data-ride="carousel" data-interval="3000" data-pause="null">
    <div class="carousel-inner">
        <div class="carousel-item active">
            <img class="d-block w-100" src="https://via.placeholder.com/150" alt="First slide">
            <div class="container">
                <div class="slider-text">
                    <h2>Lorem Ipsum is simply dummy text.</h2>
                    <p>ndustry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer.</p>
                </div>

            </div>
        </div>

        <div class="carousel-item">
            <img class="d-block w-100" src="https://via.placeholder.com/150" alt="Second slide">
            <div class="container">
                <div class="slider-text">
                    <h2>Lorem Ipsum is simply dummy text.</h2>
                    <p>ndustry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer.</p>
                </div>

            </div>
        </div>

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

【讨论】：