Troubleshoot: Issue with Active Class in Bootstrap Carousel LI Item

Question

Troubleshoot: Issue with Active Class in Bootstrap Carousel LI Item

I modified the bootstrap 4 carousel code by splitting it into two columns. This was necessary because I wanted to move the carousel indicators outside of the carousel itself, rather than having them inside as per the default setup.

While the image-changing aspect of the carousel is functioning correctly, the issue lies with the "active" class not transitioning to any other list item.

HTML

<div class="row mx-0">
...
            </div>
        </div>
    </div>

CSS

.carousel-inner,.carousel,.carousel-item,.container#carousel-container,.fill {
    height:100%;
    min-height:700px;
    width:100%;
    background-position:center center;
    background-size:cover;
}
.slide-wrapper{display:inline;}
.slide-wrapper .container{padding:0;}

/*------------------------------ vertical bootstrap slider----------------------------*/
.carousel-inner> .carousel-item.carousel-item-next ,
...
#carousel-indicators li.active i{
    color: var(--primaryColor);
}

In order to enhance user experience on my page, I simply want to adjust the color of the active indicator dot.

html css web bootstrap-4 carousel

Answer 1

Answer №1

There is a simple way to achieve this with just a little bit of CSS. The key is to have both sections ("section of indicators" and "section of images") within the carousel div (the one with the id='myCarousel'). This will give you default functionality, including the auto slide where the 'active' class is applied as well.

Below is a working snippet:

/* Make the image fully responsive */

    .carousel-inner img {
      width: 100%;
      height: 100%;
    }

    .carousel-indicators {
      display: block !important;
      height: 90% !important;
    }

    .carousel-indicators li {
      background-color: red !important;
      width: 10px !important;
      height: 10px !important;
      margin: 40% !important;
    }

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>

    <div class='container-fluid'>
      <h2>Demo Carousel</h2>
      <div id="demo" class="carousel slide" data-ride="carousel">
        <div class='row'>

          <div class='col-lg-1 col-md-1 col-sm-1 col-1'>
            <!-- Indicators -->
            <ul class="carousel-indicators">
              <li data-target="#demo" data-slide-to="0" class="active"></li>
              <li data-target="#demo" data-slide-to="1"></li>
              <li data-target="#demo" data-slide-to="2"></li>
              <li data-target="#demo" data-slide-to="3"></li>
            </ul>
          </div>

          <div class='col-lg-11 col-md-11 col-sm-11 col-11'>
            <!-- The slideshow -->
            <div class="carousel-inner">
              <div class="carousel-item active">
                <img src="https://www.w3schools.com/bootstrap4/la.jpg" alt="Los Angeles" width="1100" height="500">
              </div>
              <div class="carousel-item">
                <img src="https://www.w3schools.com/bootstrap4/chicago.jpg" alt="Chicago" width="1100" height="500">
              </div>
              <div class="carousel-item">
                <img src="https://www.w3schools.com/bootstrap4/ny.jpg" alt="New York" width="1100" height="500">
              </div>
              <div class="carousel-item">
                <img src="https://www.akberiqbal.com/Jumbo.jpg" alt="Akber Iqbal" width="1100" height="500">
              </div>
            </div>
          </div>

        </div>
      </div>
    </div>

NOTE: In this stack overflow code snippet, I had to use !important for each property because it loads the custom CSS before the bootstrap.css. In your own code, place the <style>...</style> block after loading bootstrap.css, and you won't need to use !important.

Answer 2

There is a simple way to achieve this with just a little bit of CSS. The key is to have both sections ("section of indicators" and "section of images") within the carousel div (the one with the id='myCarousel'). This will give you default functionality, including the auto slide where the 'active' class is applied as well.

Below is a working snippet:

/* Make the image fully responsive */

    .carousel-inner img {
      width: 100%;
      height: 100%;
    }

    .carousel-indicators {
      display: block !important;
      height: 90% !important;
    }

    .carousel-indicators li {
      background-color: red !important;
      width: 10px !important;
      height: 10px !important;
      margin: 40% !important;
    }

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>

    <div class='container-fluid'>
      <h2>Demo Carousel</h2>
      <div id="demo" class="carousel slide" data-ride="carousel">
        <div class='row'>

          <div class='col-lg-1 col-md-1 col-sm-1 col-1'>
            <!-- Indicators -->
            <ul class="carousel-indicators">
              <li data-target="#demo" data-slide-to="0" class="active"></li>
              <li data-target="#demo" data-slide-to="1"></li>
              <li data-target="#demo" data-slide-to="2"></li>
              <li data-target="#demo" data-slide-to="3"></li>
            </ul>
          </div>

          <div class='col-lg-11 col-md-11 col-sm-11 col-11'>
            <!-- The slideshow -->
            <div class="carousel-inner">
              <div class="carousel-item active">
                <img src="https://www.w3schools.com/bootstrap4/la.jpg" alt="Los Angeles" width="1100" height="500">
              </div>
              <div class="carousel-item">
                <img src="https://www.w3schools.com/bootstrap4/chicago.jpg" alt="Chicago" width="1100" height="500">
              </div>
              <div class="carousel-item">
                <img src="https://www.w3schools.com/bootstrap4/ny.jpg" alt="New York" width="1100" height="500">
              </div>
              <div class="carousel-item">
                <img src="https://www.akberiqbal.com/Jumbo.jpg" alt="Akber Iqbal" width="1100" height="500">
              </div>
            </div>
          </div>

        </div>
      </div>
    </div>

NOTE: In this stack overflow code snippet, I had to use !important for each property because it loads the custom CSS before the bootstrap.css. In your own code, place the <style>...</style> block after loading bootstrap.css, and you won't need to use !important.

Troubleshoot: Issue with Active Class in Bootstrap Carousel LI Item

Answer №1

Similar questions

problem with nivo slider causing content to overflow

When files are uploaded to the server, the hyperlinks fail to function properly

JavaScript Summation Calculation

The background-size property in CSS does not seem to properly display on iPhones

Is there a way to implement jQuery for displaying and hiding DIVs according to checkboxes in a form submitted from a separate page?

Seamless conversion

Out of the blue, margin-top and marin-left suddenly appeared

Keeping the color of CSS buttons consistent can be achieved by setting specific

How to implement pagination for JSON response data

Tips for automatically floating elements to the right or left

What is the best way to crop a background image for optimal lazy loading?

The sidebar is not automatically adjusting its height to match the height of the content

Seeking guidance on navigating a Bootstrap tabbed navigation menu with nested dropdowns using previous and next buttons

Sending a user's ID to a Bootstrap modal in Angular 4: step-by-step guide

Styling can be compromised by Angular due to selector element interference

Adding Materialize CSS to an AngularJS project: A step-by-step guide

Exploring the integration of Javascript and PHP variables for seamless data interchange

Issues with AngularJS ng-view not functioning as expected

What exactly does the ::before pseudo-element accomplish?

Receive a pair of distinct arrays through a text field submission