CODEWITHSUNDEEP
htmlbootstrap-4
T.C
T.C

Reputation: 311

Bootstrap 4 carousel indicators are not working

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.

Upvotes: 2

Views: 326

Answers (3)

Jaymin Trivedi
Jaymin Trivedi

Reputation: 1

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>

Upvotes: 0

Lalji Tadhani
Lalji Tadhani

Reputation: 14149

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/

Upvotes: 1

Nik
Nik

Reputation: 1709

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>

Upvotes: 1

Related Questions