What is the reason my bootstrap carousel isn't functioning properly?

My carousel is only displaying the first image and seems to be stuck. The navigation buttons are also not functioning. Here is the code for reference: 

<main>
  <div id="slider" class="carousel slide" data-mdb-ride="carousel">
    <div class="carousel-inner" >
      <div class="carousel-item active">
        <img src="images/hero1.png" class="d-block w-100" alt="Wild Landscape">
      </div>
      <div class="carousel-item ">
        <img src="images/hero2.jpg" class="d-block w-100" alt="Camera">
      </div>
      <div class="carousel-item ">
        <img src="images/hero3.jpg" class="d-block w-100" alt="Exotic Fruits">
      </div>
    </div>
    <button class="carousel-control-prev" type="button" data-mdb-target="#slider" data-mdb-slide="prev">
      <span class="carousel-control-prev-icon" aria-hidden="true"></span>
      <span class="visually-hidden">Previous</span>
    </button>
    <button class="carousel-control-next" type="button" data-mdb-target="#slider" data-mdb-slide="next">
      <span class="carousel-control-next-icon" aria-hidden="true"></span>
      <span class="visually-hidden">Next</span>
    </button>
  </div>
</main>


    
<script src="js/bootstrap.min.js"></script>

htmlcssbootstrap-5

Answer №1

Make sure to pay attention to the specific bootstrap version being utilized. For instance, in version 5.2 it is necessary to use the following attributes:

data-bs-ride
data-bs-target
data-bs-slide

<link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="52303d3d26212620332212677c607c627f3037263363">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="563439392225222437261663786478667b3433223767">[email protected]</a>/dist/js/bootstrap.bundle.min.js"></script>

<main>
      <div id="slider" class="carousel slide" data-bs-ride="carousel">
        <div class="carousel-inner" >
          <div class="carousel-item active">
            <img src="images/hero1.png" class="d-block w-100" alt="Wild Landscape">
          </div>
          <div class="carousel-item ">
            <img src="images/hero2.jpg" class="d-block w-100" alt="Camera">
          </div>
          <div class="carousel-item ">
            <img src="images/hero3.jpg" class="d-block w-100" alt="Exotic Fruits">
          </div>
        </div>
        <button class="carousel-control-prev" type="button" data-bs-target="#slider" data-bs-slide="prev">
          <span class="carousel-control-prev-icon" aria-hidden="true"></span>
          <span class="visually-hidden">Previous</span>
        </button>
        <button class="carousel-control-next" type="button" data-bs-target="#slider" data-bs-slide="next">
          <span class="carousel-control-next-icon" aria-hidden="true"></span>
          <span class="visually-hidden">Next</span>
        </button>
      </div>
</main>

We hope this information proves helpful.

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

I want to create a custom jQuery slider totally from scratch

Greetings everyone, I have been tasked with creating a slider using only HTML / jQuery code. Here is the template: And here is the HTML code for the template above: <div id="viewport-container"> <section id="sliding-container"> & ...

javascriptjqueryhtmlcssslider

Verify the presence of a specific select option using text in jQuery version 1.7

Looking at the following snippet of HTML: <select id="sel"> <option value="0">Option1</option> <option value="1">Option2</option> <option value="2">Option3</option> <option value="3">Option4</option> & ...

javascriptjqueryhtmljquery-selectors

Exploring the versatility of Bootstrap 4's grid system with varying column widths

I am encountering an issue with div alignment in my code. The first two col-3 classes seem to have different widths than the next two col-3 classes, causing elements to appear unaligned. Here is the code snippet: <link href="https://stackpath.bootstr ...

htmlcsstwitter-bootstrapbootstrap-4

Unable to remove the vertical dropdown menu padding issue in Firefox

issue: https://i.stack.imgur.com/qisVn.jpg My website appears correctly on IE, Opera, and Chrome, but in Firefox, there is a spacing problem between each image in the dropdown menu. I suspect the issue lies within the CSS code. The same spacing issue occ ...

csspadding

Steps for aligning the upper rectangular text in the center of the larger rectangular border

https://i.stack.imgur.com/7yr5V.png I was aware of a particular element in html that had text positioned in the upper left corner, but my knowledge didn't go beyond that. Should I be adjusting the translation on both the X and Y axes based on the par ...

javascripthtmlcssangulartypescript

How to use jQuery to dynamically set the value of a column span in a

Struggling with setting the value for a table column span. Here is my jQuery code: $('tr td data-th=Name span').val('My span content...'); This is how my HTML appears: <tr> <td data-th="Name"><span class="edit-inpu ...

javascriptjqueryhtml

Unable to access localStorage

I created a Plunker to store a value in localStorage: <!DOCTYPE html> <html> <script> localStorage.setItem('test', "hadddddha"); </script> </html> Then, I built a test page to retrieve the value from local ...

javascripthtmllocal-storagesession-storage

Utilize CSS block display for ::before and ::after pseudo elements within a div container

I have a CSS file that contains the following code snippet: .loader { width: 250px; height: 50px; line-height: 50px; text-align: center; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); font-fam ...

htmlcssdisplay

Using Google-Prettify with AngularJS

I have been attempting to implement Google Prettify in my AngularJS project. It seems to be functioning correctly on the main page, but once I navigate to another route using Angular (after ng-view), it stops working properly. You can check out the plunker ...

javascriptcssangularjsngroute

Looking to design a popup using CSS styles

How can I design a pop-up window using CSS for a specific div? I also want to display additional information within another div inside the popup. ...

csshtml

What steps should I take to confirm the text exists within a particular <DIV> element using Selenium WebDriver (java) and Chrome?

Background: My current setup involves using Selenium WebDriver with Java and utilizing Google Chrome as the browser. I have a question regarding locating specific text on a webpage. What if there are multiple instances of the same text that I am looking f ...

javahtmlseleniumxpathselenium-webdriver

PHP does not properly interpret quotation marks when passed from an HTML form

My current setup involves a simple HTML form with a submit button that triggers my PHP script to process the input. However, I've encountered an issue where my PHP code fails to recognize the quotation mark when using str_replace function. Below is a ...

phphtmlcharacter-encoding

using sass to nest multiple classes

In an attempt to utilize nested classes with Sass, I am working on a styling code that displays a button on hover. Here is the structure of my SCSS: .item{ border-bottom: 1px dotted #ccc; text-indent: 50px; height: 81%; padding: 2px; text-transf ...

csssass

Unlocking the Power of NextJS Keyframes

After successfully creating a background with 3 images using keyframes in my initial project built with html and css, I decided to recreate the project using NextJS. However, I encountered an issue where the third image does not display in NextJS. Instead ...

htmlcssreactjsnext.js

What causes a slow disappearance of both the form element and its child elements when the visibility attribute is set to hidden on the

Have you ever noticed that the child elements of an element form hide slowly when using visibility:hidden, but hide quickly when using display:none? This slow hiding can negatively impact user experience. I tried to find information on this issue, but eve ...

cssangularforms

How can you transfer data from a jQuery function to a designated div element?

I'm struggling to transfer data from a function to a specific div, but I can't seem to make it work. I'm in the process of creating a gallery viewer and all I want is to pass the counter variable, which I use to display images, and the total ...

javascriptjqueryhtmlcss

Display HTML element within the <samp> tag using PHP

I'm using Bootstrap for my form control, but my input and button are not on the same line. <div class="form-group"> <label class="col-lg-3 control-label" id="title-meaning">Meaning:</label> <div c ...

phphtmlcsstwitter-bootstrap

The clash between Traditional JavaScript and jQuery

As I pored over a textbook, I found myself stumped by an example problem. Here is the HTML code in question: $(function(){ $("#checkAll").click(function(){ $("[name=items]:checkbox").attr("checked", true); console.log("check all"); }); $("#checkNo").cl ...

javascriptjqueryhtml

Keep HTML in sync across browser and server

Is there a way to efficiently update a large unordered list in a web application without sending the entire list over the network or resorting to pagination, while ensuring it stays synchronized with a memoized server-generated copy? ...

htmlajaxsynchronization

Can the site be shown in the background?

I have a unique idea for a games website that I want to share. It's a bit difficult to explain, so please bear with me as I try to convey my vision! The inspiration for this project comes from a website called . Have you seen it before? The concept i ...

javascriptjqueryhtmlcss