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

вы присвоили 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 2

Вы добавили 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>

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>