Bootstrap 4 carousel indicators are not working

Question

Can someone please tell me why when I click on the indicators it does not go to the next slide?

My HTML code:

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

I have both Bootstrap stylesheets and scripts installed:

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

I tried adding the controls and thought maybe it was needed to make the indicators work, but the controls (next and previous buttons) weren't working either.

Answer 1

You have added class two times to the div where the carousel starts. Try separating it.

Have look at following code snippet.

 .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

you have assigned a 2-time class property

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

replace to

<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

Try this one:

$(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
            }
        },
    });
 });

Add CSS and JS for carousel images :

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