I'm having trouble getting the Bootstrap 5 Carousel to work, even though I directly copied the code from the official website

Currently, I am designing a webpage utilizing Bootstrap 5 and incorporating the CDN for functionality. Although, when attempting to implement their carousel feature, it does not seem to be functioning as expected. The only modification I have made to their code is changing the image source "src" by copying it directly from their website. Below is an excerpt of my code:

<!DOCTYPE html>
<!--[if lt IE 7]>      <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]>         <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]>         <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]>      <html class="no-js"> <!--<![endif]-->
<html>
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <title>Alpha Ace Trading</title>
        <meta name="description" content="">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="c3a1acacb7b0b7b1a2b383f6edf1edf1">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-Zenh87qX5JnK2Jl0vWa8Ck2rdkQ2Bzep5IDxbcnCeuOxjzrPF/et3URy9Bv1WTRi" crossorigin="anonymous">
        <link rel="stylesheet" href="style.css">
    </head>
    <body>
        <nav class="navbar navbar-expand-md bg-white fixed-top ">
            <div class="container">
                <a href="#" class="navbar-brand">Alpha Ace</a>
                <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navmenu"><span class="navbar-toggler-icon"></span></button>
                <div class="collapse navbar-collapse" id="navmenu">
                    <ul class="navbar-nav ms-auto">
                        <li class="nav-item">
                            <a href="#" class="nav-link">home</a>
                        </li>
                        <li class="nav-item">
                            <a href="#" class="nav-link">home</a>
...

The issue I'm encountering is depicted below:

https://i.sstatic.net/HpJgK.png

Upon inspection, it appears that the indicators are not displaying, and the navigation buttons do not function upon clicking.

javascripthtmlcssbootstrap-5bootstrap-carousel

Answer №1

Works great when adding the prefix data-bs- to bootstrap attributes. I made sure to match the versions of the javascript and css files which resolved an error message that was popping up after the last slide.

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

The Woocommerce mini cart subtotal fails to accurately update after a change in currency

Is there a way to dynamically recalculate and update the Subtotal of the mini cart in real-time based on the current currency values upon page reload using JavaScript or PHP? I am facing an issue with my mini cart displaying incorrect Subtotal values when ...

javascriptphpwordpresswoocommercehook-woocommerce

Showing JSON information on a web browser

Here is a snippet of JSON data that I am working with: {"earthquakes":[{"datetime":"2011-03-11 04:46:23","depth":24.39999999999999857891452847979962825775146484375,"lng":142.36899999999999977262632455676794 ...

javascriptjsonajaxxmlhttprequest

Issue with Redux saga not responding to action initiated by clicking on an icon

Declaration of Saga function* DoStuffInSaga({myRef}){ try { console.info("saga running"); return yield delay(1000, 1); } catch(error){ console.warn(error); } } export function* mySaga(){ yield all([ yi ...

javascriptreactjsecmascript-6redux-saga

Dynamic <figcaption> that adjusts to different screen sizes with smooth animations

My first WordPress theme is almost complete and I'm excited to share it: The responsive image grid on the homepage is giving me some trouble. When I shrink the browser window, the images don't scale properly. The grid works fine without the JS ( ...

javascriptjqueryhtmlcss

Issue with Java Script inheritance in google.maps.OverlayView not functioning as expected

UPDATE: After spending another day working on this, I believe I have identified the issue, although it is not yet confirmed. Once I have verified the solution, I will update this post with an answer. My current understanding is that the problem arises fro ...

google-mapsgwtjavascript

Show a checkmark or X depending on the condition in Javascript

I have an array of data that I want to compare to the input in a text field. If the input matches an element in the array, I want to display a checkmark, and if it doesn't match, I want to display a crossmark. However, I'm having an issue where ...

javascripthtmlcssangular

The Slack Bot is having trouble downloading files from direct messages, but it is successfully downloading them when uploaded to a channel

I have developed a program to retrieve files using a code snippet provided by a Slack bot. Below is the code: var https = require('https'); var fs = require('fs'); var downloadFile = function (url, dest){ var slug = url.split(&apos ...

javascriptnode.jsnode-modulesslack-apibotkit

Ways to evaluate a date against a string in JavaScript

I am currently working on developing a custom filter to showcase the most recent file in my system using AngularJS for data filtering. The challenge I am facing is that the date information is saved as a string in my json file, and I'm unsure how to ...

javascriptangularjsjsondate

Best practice for updating the state in a sibling component in React without affecting the parent component

Let's consider a simple scenario where we have three different components: const ParentComponent = (props) => { return( <ChildComponentA ...variousPropsHere /> <ChildComponentB ...variousPropsHere /> } ChildComponentA is an ...

javascriptreactjsreduxrerender

There is an ample amount of blank space located at the bottom of the page

There seems to be an excess of white space at the bottom of my webpage, despite my efforts to adjust margins and padding. I've inspected the elements using browser developer tools but have been unable to pinpoint the issue. var chatResponseBox = do ...

javascripthtmlcssbootstrap-5

Verify whether a variable includes the tag name "img."

Currently, I am working with a variable that holds user input in HTML format. This input may consist of either plain text or an image. I am looking to determine whether the user has entered an image or just simple text. Here is an example of user entry: t ...

javascriptvue.jsvuejs2

I am seeking assistance in troubleshooting this javascript code. Can someone please help me identify the issue?

function validateCredentials() { var username = document.forms["myForm"]["name"].value; var admin = "admin"; var user = "user"; var master = "master"; if (username == "&qu ...

javascripthtmlcssreactjs

Set up a JavaScript function that triggers an alert if two numbers are determined to be equal

I created a code snippet that should display an alert message when a button is clicked, indicating whether two random numbers generated are equal or not. The random numbers must be integers between 1 and 6. I implemented this functionality in JavaScript bu ...

javascriptjqueryhtml

Challenges with HTML and CSS drop-down menus

My navigation is giving me a headache. I've been trying to add a dropdown menu, but nothing seems to be working. Here's my current HTML/CSS code. If you have any suggestions on how to fix it, please lend a hand! I've also included a picture ...

htmlcssdrop-down-menuhover

Having trouble getting ASPJAX to function properly

I'm looking to create a demo showcasing the combination of ASP and AJAX. I came across some code snippets from http://www.aspjax.com that I've incorporated into my project. However, I'm having trouble displaying the expected text. Here is t ...

htmlajaxasp-classic

Getting just the outer edges of intricate BufferGeometry in Three.js

Currently, I am immersed in a project that involves zone creation and collision detection using Three.js. The primary objective is for my application to effectively manage collisions and produce a BufferGeometry as the final output. My aim is to visually r ...

javascriptreactjstypescriptmaththree.js

Angular.js routing malfunctioning

I am currently working on an angular.js controller called loginErrorCtrl, which is responsible for redirecting to a specific view (/menu) when the data entered into an input matches a predefined string in the application (Data.serverToken). function login ...

javascriptangularjsurl-routing

Limit the access to Google Maps data based on the size of the user's device for improved performance

I'm currently developing a web application that involves the integration of Google Maps. The idea is to have a desktop version displaying a map with markers for each listed object, but I want to avoid showing the map on smaller devices like iPhones. T ...

javascriptcssgoogle-maps-api-3

Leveraging three.js for visualizing temporal data series

What is the best approach for using time series data to control the animation of a three.js scene? For instance: Time | ObjA(x,y,z) | ObjB(x,y,z) | ... 00:00:00 | 0,9,0 | 1,1,1 | ... 00:00:10 | 0.1,0,0.1 | 1,0.5,1 | ... 00:0 ...

javascriptopengl-esthree.jswebgl

Using Ajax to implement the Modal IF functionality

Currently in the process of registering a domain, utilizing two modals in the process. Through Ajax, I have set it up so that if the response is 1, an alert stating that the domain is available is displayed. If the response is 0, an alert stating that the ...

javascriptphpjqueryhtmlajax