Non-responsive indicators on Bootstrap carousel

I am having trouble getting the carousel indicators to be clickable on my Boostrap 4 carousel, unlike in the examples I have seen. It seems like this feature should work out of the box, but for some reason it's not working for me. I simply copied the carousel code from the official Bootstrap documentation and added my content. I want the text on the indicators to be clickable for each slide. Can anyone help me figure out what went wrong?

.carousel-indicators {
  background-color: blue;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" />
<section class="drinks_menu">
  <div class="container">
    <div id="drinks_carousel" class="slide" data-ride="carousel">

     (REST OF THE CODE HERE...)

htmlcssbootstrap-4carousel

Answer №1

One important detail you might have missed is the absence of the carousel class from this code: 

<div id="drinks_carousel" class="carousel slide" data-ride="carousel">
. If you're unsure about how to properly add it, you can refer to this resource.

.carousel-indicators {
  background-color: blue;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" />
<section class="drinks_menu">
  <div class="container">
    <div id="drinks_carousel" class="carousel slide" data-ride="carousel">
      <ul class="carousel-indicators">
        <li data-target="#drinks_carousel" data-slide-to="0" class="active">HOT DRINKS</li>
        <li data-target="#drinks_carousel" data-slide-to="1">SOFT DRINKS</li>
        <li data-target="#drinks_carousel" data-slide-to="2">BEER</li>
        <li data-target="#drinks_carousel" data-slide-to="3">WINE</li>
        <li data-target="#drinks_carousel" data-slide-to="4">SPIRITS</li>
      </ul>
      <div class="carousel-inner">
       <!-- Code continues... -->
    </div>
  </div>
</section>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Bootstrap: when divs cover the jumbotron

I have recently started exploring bootstrap and have been using it to build a homepage for my website. However, I am facing an issue: The three images are overlapping the jumbotron section and I can't seem to figure out why. Below is the HTML code sn ...

javascriptjqueryhtmlcsstwitter-bootstrap

Is there a way to locate the final <li></li> within each <ul></ul>? (Regarding front-end development, specifically dealing with html, css, and jquery)

I'm dealing with a menu that has submenus of its own. Issue: Upon loading the page, I notice that the website is adding an extra letter S at the end of each submenu. How can I eliminate that letter S from the end of every submenu using JQuery or CS ...

javascriptjqueryhtmlcssfrontend

Do not decode HTML content within an iframe; instead, extract the data directly from the HTML source

To expedite execution time, we have made the decision to not display the table in the iframe as it is invisible to the client. However, we still need to update the main page table by copying its contents. The approach we are taking is that the iframe shou ...

javascripthtmlajaxiframe

Encountered an error while loading resource: net::ERR_CONNECTION_REFUSED in Nodejs

I am currently working on a form in my angular 6 app with nodejs, utilizing nodemailer for sending emails. Unfortunately, I am encountering an error that reads: Failed to load resource: net::ERR_CONNECTION_REFUSED : :3000/contact/send:1 Below is the form ...

node.jsangulartypescriptexpressbootstrap-4

Ways to structure a div to resemble a table

I'm currently working on a form that has multiple input fields, and I'm looking to structure them in a specific way. The layout I want to achieve can be seen in this example: https://jsfiddle.net/dmilos89/58ea82gj/2/ The example above utilizes ...

htmlcss

How to customize a bootstrap checkbox in ReactJs and set it to an indeterminate state

I have created a custom checkbox that functions as a "Three-State-Checkbox", utilizing the indeterminate state as both a visual and real value. The checkbox works correctly with the standard checkbox, but when I use the Bootstrap custom checkbox, the React ...

javascriptreactjscheckboxbootstrap-4

Issue with data transfer between parent and child components in ReactJS

Currently, I'm in the process of developing my own version of a Trello Clone. The journey has been smooth so far, and I owe much of it to the generous support I've received from everyone here - thank you! However, I've run into a slight roa ...

javascripthtmlreactjsparent-child

Fiddle demonstrates HTML functionality, while local testing is unsuccessful

Currently, I am in the process of creating an image slider and attempting to run it on my personal computer. However, upon doing so, I have encountered a problem where the page is not rendering correctly. Additionally, I receive an ActiveX warning message ...

javascriptjquerycsshtml

The margin-left property is not functioning properly on the second <td> element

Displaying a table with two cells positioned next to each other: <table> <td disabled>Content for the first cell</td> <td style="margin-left:100px;" disabled>Content for the second cell</td> </table> Despite us ...

htmlcsshtml-table

I can't seem to get the dropdown list to appear. What could be the issue?

I'm currently trying to create a pure CSS dropdown menu on hover by following this tutorial. However, despite multiple attempts, I'm still stuck and in need of some clear explanations for my issue. <div class="navbar"> ...

htmlcss

What is the best way to position text messages at the bottom of a chat window?

I am currently working on a chat window, and while setting the height to 100% works perfectly, I am facing difficulty in making the messages appear at the bottom. HTML: <div class="d-flex justify-content-center"> <div class="container containe ...

csstwitter-bootstrapbootstrap-4

Wordpress easily adjusts post alignments for a seamless display

Can anyone help me figure out how to properly align posts in Wordpress to match the example image attached? I've tried using inline-block or float with CSS/HTML, but the posts are not aligning correctly. I'm unsure of what this method is called s ...

phphtmlcsswordpressalignment

What could be the reason for the inconsistent behavior of onClick, causing it to occasionally fail to display the associated

I just started using typescript 2 days ago, mainly to create a custom component for my streamlit app. I've made a navigation bar with a tab that can be clicked on the sidebar, but it's displaying some erratic behavior. Sometimes when I click on t ...

pythonhtmltypescriptonclicktabs

Displaying the "Ad Blocker Detected" image next to the advertisement

I am attempting to create a feature where if adblock is enabled, an image will display behind the ad banner on my website with the message "Please consider disabling adblock". Unfortunately, it is only showing up as a bordered box. Here is how the box ap ...

htmlcss

Updating the span's value with Javascript

My HTML document includes a span element that looks like this: <span class="className">0</span> and it should display: 0 The issue at hand is how to increment the value of the span (e.g. from 2 to 3) by clicking a button using JavaScript. ...

javascripthtml

What could be the reason for this tag not functioning properly?

I am facing an issue with my navbar where the <a> tag is not updating the URL to the new address. I have tried giving the <a> tag a z-index 999;, but it still doesn't work. This is a one-page site and I use # to make the browser jump to t ...

htmlcssflexboxnavbar

Avoid using CSS styles when accessing the website from China

There seems to be an issue with one of our websites. Visitors from China are viewing the site without the CSS files, only the HTML. What could be causing this? Why is it only happening in China? Could there be restrictions in place, possibly for JavaScri ...

javascriptcss

Choose the radio button upon clicking away from the input field

Currently, I have a standard Bootstrap 4 accordion that contains a radio button. Here is the code snippet: <div class="card"> <div class="card-header" id="headingOne"> <h2 class="mb-0"> ...

htmlcsstwitter-bootstrap

JS use regex to set input field value

Is there a way to automatically format the input value in an HTML time picker field using regex and the replace function? For example, when a user enters numbers, the input value should be formatted accordingly based on a specific pattern. I attempted to ...

javascripthtmlcssregexinput

Get the identification number from a div located within an array of JSON objects using only JavaScript

I've scoured the internet for solutions to my problem, but nothing seems to work as I need it to. I've attempted various methods, including using href and button with the router, but unfortunately, none of them fit the specific requirements in th ...

javascripthtmlnode.jsjson