Bootstrap 4轮播指示器不起作用

时间：2019-04-15 05:31:42

标签： html bootstrap-4

有人可以告诉我为什么当我单击指示器时却不转到下一张幻灯片吗？

我的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>

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

3 个答案:

答案 0 :(得分：1)

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

请查看以下代码段。

.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>

答案 1 :(得分：1)

您已分配了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/

答案 2 :(得分：0)

尝试这个：

$(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>

相关问题
最新问题