Having trouble with my carousel code - specifically the next and prev buttons in Bootstrap 5. Any suggestions?

Here’s the issue with my carousel:

The carousel indicators are functioning properly,
but the "next" and "prev" buttons are not responding.

The scripts I have included are:

  • popperjs,
  • bootstrap-5.2.0
  • jquery-3.6.0.

The links in my HTML element are in the <head>.

and the scripts are in the body.

<div id="mycarousel" class="carousel slide" data-bs-ride="true">

    <div class="carousel-indicators">
        <button data-bs-target="#mycarousel" data-bs-slide-to="0" class="active" aria-current="true"
            aria-label="Slide 1"></button>
        <button data-bs-target="#mycarousel" data-bs-slide-to="1" aria-label="Slide 2"></button>
        <button data-bs-target="#mycarousel" data-bs-slide-to="2" aria-label="Slide 3"></button>
        <button data-bs-target="#mycarousel" data-bs-slide-to="3" aria-label="Slide 4"></button>
    </div>

    <div class="carousel-inner">
        <div class="carousel-item active">
            <img src="images/ecg.jpg" class="d-block w-100" alt="">
        </div>
        <div class="carousel-item">
            <img src="images/tech.jpg" class="d-block w-100" alt="">
        </div>
        <div class="carousel-item">
            <img src="images/tecnical.jpg" class="d-block w-100" alt="">
        </div>
        <div class="carousel-item">
            <img src="images/ultrason.jpg" class="d-block w-100" alt="">
        </div>
    </div>


    <button class="carousel-control-prev" type="button" data-bs-target="mycarousel" data-bs-slide="prev">
        <span class="carousel-control-prev-icon" aria-hidden="true"></span>
        <span class="visially-hidden">Previous</span>
    </button>
    <button class="carousel-control-next" type="button" data-bs-target="mycarousel" data-bs-slide="next">
        <span class="carousel-control-next-icon" aria-hidden="true"></span>
        <span class="visially-hidden">Next</span>
    </button>
</div>



<script src="https://cdn.jsdelivr.net/npm/@popperjs/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="a0c3cfd2c5e0928e91918e95">[email protected]</a>/dist/umd/popper.min.js"
    integrity="sha384-Xe+8cL9oJa6tN/veChSP7q+mnSPaj5Bcu9mPX5F5xIGE0DVittaqT5lorf0EI7Vk"
    crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="593b36362d2a2d2b3829196c776b7769">[email protected]</a>/dist/js/bootstrap.min.js"
    integrity="sha384-ODmDIVzN+pFdexxHEHFBQH3/9/vQ9uori45z4JjnFsRydbmQbmL5t1tQ0culUzyK"
    crossorigin="anonymous"></script>

<script src="https://code.jquery.com/jquery-3.6.0.min.js"
    integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
htmljquerycsscarouselbootstrap-5

Answer №1

view the image

Here is my carousel code.

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="c9aba6a6bdbabdbba8b989fce7f9e7fb">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet">
</head>

<body>
    <div id="mycarousel" class="carousel slide" data-bs-ride="true">

        <div class="carousel-indicators">
            <button data-bs-target="#mycarousel" data-bs-slide-to="0" class="active" aria-current="true"
                aria-label="Slide 1"></button>
            <button data-bs-target="#mycarousel" data-bs-slide-to="1" aria-label="Slide 2"></button>
            <button data-bs-target="#mycarousel" data-bs-slide-to="2" aria-label="Slide 3"></button>
            <button data-bs-target="#mycarousel" data-bs-slide-to="3" aria-label="Slide 4"></button>
        </div>
    
        <div class="carousel-inner">
            <div class="carousel-item active">
                <img src="img1.jpg" class="d-block w-100" alt="">
            </div>
            <div class="carousel-item">
                <img src="img2.jpg" class="d-block w-100" alt="">
            </div>
            <div class="carousel-item">
                <img src="img3.jpg" class="d-block w-100" alt="">
            </div>
            <div class="carousel-item">
                <img src="img4.jpg" class="d-block w-100" alt="">
            </div>
        </div>
    
    
        <button class="carousel-control-prev" type="button" data-bs-target="#mycarousel" data-bs-slide="prev">
              	<span class="carousel-control-prev-icon" aria-hidden="true"></span>
            <span class="visially-hidden">Previous</span>
        </button>
        <button class="carousel-control-next" type="button" data-bs-target="#mycarousel" data-bs-slide="next">
           <span class="carousel-control-next-icon" aria-hidden="true"></span>
            <span class="visially-hidden">Next</span>
        </button>
    </div>
    
    
    
    <script src="https://cdn.jsdelivr.net/npm/@popperjs/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="9ffcf0edfadfadb1aeaeb1aa">[email protected]</a>/dist/umd/popper.min.js"
        integrity="sha384-Xe+8cL9oJa6tN/veChSP7q+mnSPaj5Bcu9mPX5F5xIGE0DVittaqT5lorf0EI7Vk"
        crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="c9aba6a6bdbabdbba8b989fce7fbe7f9">[email protected]</a>/dist/js/bootstrap.min.js"
        integrity="sha384-ODmDIVzN+pFdexxHEHFBQH3/9/vQ9uori45z4JjnFsRydbmQbmL5t1tQ0culUzyK"
        crossorigin="anonymous"gt;</script>
    
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"
        integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"&glt;</script>

</body>

</html>

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

Unleashing the power of specific dates with the angularJS datepicker directive

I am looking to develop a custom Datepicker directive using Angular JS, with the requirement of allowing only specific dates for selection by the user. For instance, I have a predefined list of numbers such as 1,3,5,7, and my goal is to make these particu ...

angularjshtmldatepickerangular-ui-bootstrap

Tips on concealing the overflow content within a Material UI table cell, rather than allowing it to wrap around

I have been trying to use the material UI Table component in order to display a table. The issue I am facing is that when the content in a cell exceeds the allotted space, instead of showing ellipses (...), the text wraps within the cell. I attempted to ap ...

cssreactjsmaterial-ui

jQuery slider for enhancing Zend_Form

Is there a way to create a jQuery slider with a fixed maximum value similar to the one found here: http://jqueryui.com/demos/slider/#rangemin I have made some progress with it: $slider = new ZendX_JQuery_Form_Element_Slider('amount'); $slider- ...

phpjqueryzend-frameworksliderzend-form

Include the title of the page in the printing stylesheet

Is there a way to dynamically insert the page title into the print version of my website using jQuery and CSS? I have a separate print.css file, but I'm wondering if it's possible to grab the title data as a variable in jQuery and then use CSS to ...

jquerycsstitle

What potential issue could this code be causing with repeated form submissions?

Trying to implement AJAX form submission using PHP code: <!doctype html> <html> <head> <meta charset='utf-8'> <script type='text/javascript' src="./js/jquery.min.js"></script> ...

phpjqueryajax

The namespace 'pages' has not been registered

Attempting to load an index in this environment: ├── admin_material │   ├── admin.py │   ├── apps.py │   ├── forms.py │   ├── __init__.py │   ├── models.py │   ├── __pycache__ │   │  ...

pythonhtmldjangodjango-viewsdjango-templates

Implementing infinite scrolling with AngularJS by dynamically incorporating images from a local folder

I have attempted multiple times but continue to struggle with adding images. My goal is to create an image gallery and implement infinite scrolling using AngularJS. Is it possible to add images from a local folder rather than a database? <body ng-app=" ...

javascriptjqueryangularjsnginfinitescroll

streaming an HTML5 video directly from memory source

After retrieving multiple encrypted data using ajax queries and performing necessary manipulations to turn them into a valid video, I find myself at a standstill. The binary of the video is now stored in memory, but I am unsure how to display it. To confi ...

javascripthtmlvideo

It appears that IE 10 is having trouble displaying modals, possibly due to a compatibility issue with jQuery 1.7.1's animate function

By visiting www.carsense.com and clicking on the login link in the top-right corner, you may notice that the curtain appears but the modal itself does not display, even though it exists: If you locate id="content1" and modify the inline opacity to 1, the ...

jquerycssinternet-explorerinternet-explorer-10

A step-by-step guide on crafting a triangular-shaped div connected to another div

After working with HTML elements and trying to incorporate 2 divs, I realized that I couldn't achieve the triangle-shaped div that I actually needed. I have included an image for reference. Below is the HTML code snippet: <div style="background-c ...

htmlcss

"Generate a series of dropdown menus with choices using either jQuery or AngularJS from a JSON dataset

I'm in need of assistance. I want to generate select dropdowns dynamically based on data retrieved from my REST API, which is in JSON format. How can I dynamically inject these selects into my HTML? Below is an example data structure: JSON data fetch ...

javascriptjqueryhtmljsonangularjs

What components does Flex have? And how do they compare to HTML elements?

In the realm of flexibility, creating and reusing components can be a powerful tool. In this case, the ability to code a component once, style it, and then reuse it in various instances is invaluable. The beauty lies in the independence of each copy produc ...

jqueryhtmlcomponentswebcode-separation

Is it possible to dynamically load records in real time with the help of PHP and jQuery?

I developed a custom system using PHP that allows users to post status messages, similar to a microblog. The system utilizes a database table structured like this: posts_mst ------------------ post_id_pk post_title post_content date_added Initially, I su ...

phpjavascriptjqueryhtmlajax

Looking for a way to incorporate dynamic rows within Bootstrap 4?

I am struggling to figure out how to structure my bootstrap rows and columns to line up as shown in the image. I have attempted nesting columns within rows and vice versa but haven't had any success. The yellow and green sections in the picture are d ...

htmllayoutbootstrap-4

Using JQuery to compare duplicate values within the same input name

I am dealing with several hidden input fields like the ones below: <input type="hidden" value="4531" name="product_id"> <input type="hidden" value="4532" name="product_id"> <input type="hidden" value="4533" name="product_id"> My goal is ...

javascriptjquery

Do elements containing {visibility:hidden} properties exist within the HTML DOM structure?

Do HTML elements that have the css property visibility:hidden still exist within the DOM tree? ...

javascripthtmlcss

I am attempting to build a party planning website but I am encountering an issue where the output is not generating properly. Whenever I click on the submit button, the information I input

I am struggling to create a party planner website and encountering issues with the output. Whenever I click on the submit button, the form just clears out without any feedback or result. Here is what the expected output should be: Validate event date 1: ...

javascripthtml

The People and Groups selection dialog is displaying incorrectly in IE 10

I've been working on a Sharepoint web application and have created a site column of type “People or Group”. This should be automatically associated with a user selection dialog as shown below: However, as you can see in the image above, the users ...

javascriptjqueryhtmlcsssharepoint

A guide on implementing input tags through instant search in HTML using AngularJS

As someone new to Angular JS, I am working on adding input tags by clicking from instant search using Angular JS. I came across a helpful example of instant search in action through this demo that Google provided. Now, I want to implement the ability to a ...

htmlangularjsselection

Issue with text-nowrap not functioning as intended within Bootstrap 4.5 table cells

Is there a way to eliminate the space between two columns in my layout? I want to get rid of the highlighted space below. I attempted using text-nowrap, but it didn't achieve the desired result. <link href="https://stackpath.bootstrapcdn.co ...

csstwitter-bootstrapbootstrap-4html-tablenowrap