What steps do I need to take to get the carousel functioning properly?

Hello, I hope everyone is doing well. I'm currently trying to get this carousel to work, although I have checked the JS files at the end and followed the order correctly. This is the example I'm referencing from the Bootstrap website.

Important Note: test.css file is empty

Below is the code snippet:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="test.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

<title>Test</title>
</head>
<body>
<div class="container">

    <div id="carouselExampleCaptions" class="carousel slide" data-bs-ride="carousel">
      <ol class="carousel-indicators">
        <li data-bs-target="#carouselExampleCaptions" data-bs-slide-to="0" class="active"></li>
        <li data-bs-target="#carouselExampleCaptions" data-bs-slide-to="1"></li>
        <li data-bs-target="#carouselExampleCaptions" data-bs-slide-to="2"></li>
      </ol>
      <div class="carousel-inner">
        <div class="carousel-item active">
          <img src="img/s1.jpg" class="d-block w-100" alt="...">
          <div class="carousel-caption d-none d-md-block">
            <h5>First slide label</h5>
            <p>Nulla vitae elit libero, a pharetra augue mollis interdum.</p>
          </div>
        </div>
        <div class="carousel-item">
          <img src="img/s2.jpg" class="d-block w-100" alt="...">
          <div class="carousel-caption d-none d-md-block">
            <h5>Second slide label</h5>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
          </div>
        </div>
        <div class="carousel-item">
          <img src="img/s3.jpg" class="d-block w-100" alt="...">
          <div class="carousel-caption d-none d-md-block">
            <h5>Third slide label</h5>
            <p>Praesent commodo cursus magna, vel scelerisque nisl consectetur.</p>
          </div>
        </div>
      </div>
      <a class="carousel-control-prev" href="#carouselExampleCaptions" role="button" data-bs-slide="prev">
        <span class="carousel-control-prev-icon" aria-hidden="true"></span>
        <span class="visually-hidden">Previous</span>
      </a>
      <a class="carousel-control-next" href="#carouselExampleCaptions" role="button" data-bs-slide="next">
        <span class="carousel-control-next-icon" aria-hidden="true"></span>
        <span class="visually-hidden">Next</span>
      </a>
    </div>


</div>

<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.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>

Best regards,

htmlcssbootstrap-4carousel

Answer №1

To enhance your code, make sure to eliminate every instance of -bs-, such as data-bs-target, and replace it with data-target. Additionally, don't forget to update the image path accordingly.

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

Steps for dynamically changing the class of a dropdown when an option is selected:

Check out this code snippet : <select class="dd-select" name="UM_Status_Engraving" id="UM_Status_Engraving" onchange="colourFunction(this)"> <option class="dd-select" value="SELECT">SELECT</option> <option class="dd-ok" value= ...

javascriptjqueryhtml

Show data from a Mysql table column in a dropdown menu

I am trying to show the values from a MySQL table field in a select box. I attempted the code below but it only displays the specified field values in the echo function and not in the select box. I'm unsure where I made a mistake. $con = mysql_conne ...

phphtmlmysql

Choose checkboxes from an array of values using AngularJS

I have recently developed a page that includes text boxes, radio buttons, and checkboxes. This page serves as a platform for saving new data or modifying existing information. While I can successfully save new data, I encountered an issue when trying to ed ...

htmlangularjsarrays

Issues arising from the visibility and concealment of elements using bootstrap

Struggling with hiding certain content in my code. I'm fairly new to coding, having just started about a week ago. So far, I've learned HTML, CSS (which I find the most important), and how to utilize Bootstrap 4. My issue lies in wanting to hide ...

htmlcsstwitter-bootstrapbootstrap-4

How to centrally align text in list items using Bootstrap 5

Incorporating Bootstrap 5 into my project, I am facing a challenge with vertically aligning text in an li element. Despite trying various techniques mentioned in the Bootstrap documentation for middle/center alignment, none of them seem to be effective. I ...

htmlcssbootstrap-5

What is the relationship between `overflow:hidden` and the inability of `position:sticky` to function properly?

Within the code snippet provided, there is a sticky div positioned inside a container. It adheres to the top of the scrolling panel while remaining within its designated container at all times. This mimics the behavior seen in iOS' UITableView headers ...

csscss-position

Having trouble applying the alternate style sheet to handheld devices

For a single page, I have implemented two different style sheets. <link rel="stylesheet" href="css/lsharecomplete_mob.css" media="handheld" type="text/css" /> <link rel="stylesheet" href="css/lsharecomplete_dt.css" type="text/css" media="Screen" ...

csshtmlmobile

The parent div's height is not compatible with the CSS grid

I created a CSS grid layout featuring a header, side menu, and scrollable content. My goal is to test this layout in a container div where I've specified the width and height. The layout adjusts well according to the container's width, but seem ...

htmlcsslayoutcss-grid

Maximizing the number of divs arranged horizontally in HTML while utilizing the full line width

My website consists of several fixed-width div elements that are styled to flow inline using the display type inline-block. This layout creates empty space at the end of the line where subsequent div elements cannot be accommodated and have to wrap to the ...

htmlcss

Challenges encountered with input outcomes

I am facing an issue with input results. I have a button that triggers a function to check for empty input fields. However, when I click the button, it always falls into the last if statement and displays as if the fields are not empty. I have already att ...

javascripthtml

Struggling with a dynamic HTML table using Mustache and Icanhazjs technologies

I am encountering an issue while attempting to construct a dynamic table using Icanhazjs (Mustache). The table data is consistently rendered outside the table tag, resulting in my data not being displayed within the table itself. To observe the output, pl ...

htmlmustacheicanhaz.js

Conceal a specific class from being seen by another class of the same name upon clicking

I have a webpage with multiple images all sharing the same class name. When I try to hide a specific image by clicking on it, all images with that class are affected. Even though I used PHP to display the images on the webpage, I haven't been able to ...

javascriptphpjqueryhtmlcss

What advantages does withStyles offer that surpasses makeStyles?

Is there a distinct purpose for each? At what point is it more suitable to utilize withStyles instead of makeStyles? ...

cssreactjsmaterial-ui

Arranging Div Elements in a Specific Layout

I am currently experimenting with http://jsfiddle.net/ngZdg/ My main goal is to create a parallax website, but I am facing some challenges with the initial layout. I am aiming for the following design: ------------------------------------- | ...

htmlcss

Display the menu and submenus by making a request with $.get()

My menu with submenu is generated in JSON format, but I am facing issues displaying it on an HTML page using the provided code. Can someone please assist me in identifying what mistakes I might be making? let HandleClass = function() { ...

javascriptjqueryhtmljsonajax

Maintain the default material-ui class styles while making customizations to override others

Currently, I am working on customizing the material-ui tooltip and specifically need to adjust the margin for the tooltipPlacementTop class: const useStyles = makeStyles(theme => ({ tooltipPlacementTop: { margin: '4px 0' ...

cssreactjsmaterial-uioverriding

Troubles with the placement of the navbar icon in responsive design

After following a tutorial on responsive navigation bars (https://www.w3schools.com/howto/howto_js_topnav_responsive.asp), I successfully implemented the navbar on my website. However, I encountered an issue with the icon placement when clicked. Here is ho ...

htmlcss

What is the best way to transfer information using PHP?

I'm struggling to pass the player id to the delete and update page, but it's not working. Below is my table body: <tr> <td><img src="<?php echo $readRow['Photo']; ?>" width='64px'></t ...

phphtml

Can anyone provide guidance on utilizing libraries within a Chrome extension?

I have been attempting to implement this for a total of 10 hours and I am struggling to make it work in script.js. // Creating a button element const button = document.createElement('button'); button.textContent = 'copy'; button.addEve ...

javascripthtmlgoogle-chromegoogle-chrome-extension

Changing the background color of the legend text when hovering over a d3 doughnut chart

I have a doughnut chart that displays values on mouse hover. However, I would like to change the background of the legend text when hovering over the respective area of the doughnut chart. return { restrict: 'E', scope: { values: ...

htmlcssangularjsd3.js