Bootstrap 4 轮播指示器不起作用

Question

有人能告诉我为什么当我点击指标时它没有转到下一张幻灯片吗？

我的 HTML 代码：

<div class="row">
  <!--testimonial carousel-->
  <div class="col-sm-6 col-md-6 col-lg-6" id="testimonials" class="carousel slide" data-ride="carousel" data-pause="hover">
    <ol class="carousel-indicators">
        <li data-target="#testimonials" data-slide-to="0" class="active"></li>
        <li data-target="#testimonials" data-slide-to="1"></li>
        <li data-target="#testimonials" data-slide-to="2"></li>
    </ol>
    <div class="carousel-inner">
        <header>
            <h5>Testimonials</h5>
        </header>
        <div class="carousel-item active">
            <p class="d-block w-100 client-review">"Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam fel."</p>
                <h6 class="client-name">Olivia Nenza</h6>
                <p class="client-title">Owner of UFeis, LLC</p>
        </div>
        <div class="carousel-item">
            <p class="d-block w-100 client-review">"Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus."</p>
            <h6 class="client-name">Andrew Cottell</h6>
            <p class="client-title">CEO of Pythonic Marketing</p>
        </div>
        <div class="carousel-item">
            <p class="d-block w-100 client-review">"Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, preti."</p>
            <h6 class="client-name">Claudette P</h6>
            <p class="client-title">Owner of Clothing store</p>
        </div>
    </div>
</div>

我安装了 Bootstrap 样式表和脚本：

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" integrity="sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M" crossorigin="anonymous">

<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<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.11.0/umd/popper.min.js" integrity="sha384-b/U6ypiBEHpOf/4+1nzFpr53nxSS+GLCkfwBdFNTxtclqqenISfwAzpKaMNFNmj4" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js" integrity="sha384-h0AbiXch4ZDo7tp9hKZ4TsHbi047NrKGLO3SEJAg45jXxnGIfYzk4Si90RDIqNm1" crossorigin="anonymous"></script>

我尝试添加控件并认为可能需要使指示器工作，但控件（下一个和上一个按钮）也不起作用。

Answer 1

您已向轮播开始的div添加了两次class 。 尝试将其分开。

看看下面的代码片段。

 .carousel-indicators>li { background-color: red !important; }

 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" integrity="sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M" crossorigin="anonymous"> <!-- jQuery first, then Popper.js, then Bootstrap JS --> <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.11.0/umd/popper.min.js" integrity="sha384-b/U6ypiBEHpOf/4+1nzFpr53nxSS+GLCkfwBdFNTxtclqqenISfwAzpKaMNFNmj4" crossorigin="anonymous"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js" integrity="sha384-h0AbiXch4ZDo7tp9hKZ4TsHbi047NrKGLO3SEJAg45jXxnGIfYzk4Si90RDIqNm1" crossorigin="anonymous"></script> <div class="row"> <!--testimonial carousel--> <div class="col-sm-6 col-md-6 col-lg-6"> <div id="testimonials" class="carousel slide" data-ride="carousel" data-pause="hover"> <ol class="carousel-indicators"> <li data-target="#testimonials" data-slide-to="0" class="active"></li> <li data-target="#testimonials" data-slide-to="1"></li> <li data-target="#testimonials" data-slide-to="2"></li> </ol> <div class="carousel-inner"> <header> <h5>Testimonials</h5> </header> <div class="carousel-item active"> <p class="d-block w-100 client-review">"Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam fel."</p> <h6 class="client-name">Olivia Nenza</h6> <p class="client-title">Owner of UFeis, LLC</p> </div> <div class="carousel-item"> <p class="d-block w-100 client-review">"Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus."</p> <h6 class="client-name">Andrew Cottell</h6> <p class="client-title">CEO of Pythonic Marketing</p> </div> <div class="carousel-item"> <p class="d-block w-100 client-review">"Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, preti." </p> <h6 class="client-name">Claudette P</h6> <p class="client-title">Owner of Clothing store</p> </div> </div> </div> </div> </div>

Answer 2

您已分配了 2 次课程属性

<div class="col-sm-6 col-md-6 col-lg-6" id="testimonials" class="carousel slide" data-ride="carousel" data-pause="hover">

替换为

<div class="col-sm-6 col-md-6 col-lg-6 carousel slide" id="testimonials" data-ride="carousel" data-pause="hover">

https://jsfiddle.net/m24voube/1/

Answer 3

试试这个：

$(document).ready(function () {

    $("#owl-demo-one").owlCarousel({
        items: 4,
        nav: true,
        margin: 15,
        navText: ["<img src='../images/left-arrow.svg'>", "<img src='../images/left-arrow.svg'>"],
        responsive: {
            0: {
                items: 1
            },
            768: {
                items: 2
            },
            1200: {
                items: 4
            }
        },
    });
 });

为轮播图片添加 CSS 和 JS：

<link rel="stylesheet" href="owlcarousel/owl.carousel.min.css"> <script src="owlcarousel/owl.carousel.min.js"></script>