Bootstrap 5 alert: The function `$(...).carousel` is not recognized

Despite browsing through numerous similar questions, none of the solutions seem to work for my issue.

Listed below are some points I have checked:

  • Jquery is loaded before bootstrap
  • Bootstrap libraries are up to date
  • Confirmation that bootstrap.min.js is loading correctly, even after switching to a CDN delivery to avoid version mismatch or any other potential issues.

Here is the code snippet in question:

<html>
    <head>
        <meta charset = "utf-8">
        <meta name = "viewport" content = "width=device-width, initial-scale=1">
        <title>HOME</title>
        <script type = "text/javascript" src = "jquery-3.6.0.min.js"></script>
        <link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="3e5c51514a4d4a4c5f4e7e0b100e100c">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
        <script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="03616c6c77707771627343362d332d31">[email protected]</a>/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
        <link rel = "stylesheet" href = "customstyle/research_styles.css">
        <link rel = "stylesheet" href = "customstyle/navbar.css">
    </head>
    <body>
       <nav class = "navbar navbar-expand-lg navbar-dark bg-black">
           <a class = "navbar-brand" class = "typewriter_welcome" href = "#"><p class = "typewriter_welcome">Wang Lab</p></a>
           <button class = "navbar-toggler" type = "button" data-toggle = "collapse" data-target = "#navbarTogglerDemo02" aria-controls = "navbarTogglerDemo02" aria-expanded = "false" aria-label = "Toggle Navigation">
               <span class = "navbar-toggler-icon"></span>
           </button>
           <div class = "collaspse navbar-collapse" id = "navbarNav">
               <ul class = "navbar-nav mr-auto mt-2 mt-lg-0">
                   <li class = "nav-item active">
                       <a class = "nav-link" href = "index.html">Home<span class = "sr-only"></span></a>
                   </li>
                   <li class = "nav-item">
                       <a class = "nav-link" href = "research.html">Research (Current)</a>
                   </li>
                   <li class = "nav-item">
                       <a class = "nav-link" href = "#">Publications</a>
                   </li>
                   <li class = "nav-item">
                       <a class = "nav-link" href = "#">Patents</a>
                   </li>              
                   <li class = "nav-item">
                       <a class = "nav-link" href = "#">News</a>
                   </li>
                   <li class = "nav-item">
                       <a class = "nav-link" href = "#">Photos</a>
                   </li>
                   <li class = "nav-item">
                       <a class = "nav-link" href = "#">Collaborations</a>
                   </li>
                   <li class = "nav-item">
                       <a class = "nav-link" href = "#">People</a>
                   </li>
                   <li class = "nav-item">
                       <a class = "nav-link" href = "#">Contact</a>
                   </li>
               </ul>
           </div>
       </nav>

       <div class = "fold"></div>

       <div id="slides" class="carousel slide" data-ride="carousel">
        <div class="carousel-inner">
          <div class="carousel-item active">
            <img class="d-block w-100" src="images/molecule.jpeg" alt="First slide">
          </div>
          <div class="carousel-item">
            <img class="d-block w-100" src="images/parkinsons.jpeg" alt="Second slide">
          </div>
          <div class="carousel-item">
            <img class="d-block w-100" src="images/MRI.jpeg" alt="Third slide">
          </div>
        </div>
        <a class="carousel-control-prev" href="#carouselExampleControls" role="button" data-slide="prev">
          <span class="carousel-control-prev-icon" aria-hidden="true"></span>
          <span class="sr-only">Previous</span>
        </a>
        <a class="carousel-control-next" href="#carouselExampleControls" role="button" data-slide="next">
          <span class="carousel-control-next-icon" aria-hidden="true"></span>
          <span class="sr-only">Next</span>
        </a>
      </div>

      <script type = "text/javascript"> $('.carousel').carousel({interval: 2000});</script>
    </body>
</html>

If you have any insights or suggestions, please share!

javascripthtmlcssbootstrap-5

Answer №1

It appears that there are a couple of issues at hand. I recommend consulting the Bootstrap 5 documentation for further guidance.

  1. In Bootstrap 5, jQuery is no longer a requirement. However, if you choose to utilize it, ensure that it is placed before bootstrap.js at the end of the body tag, not in the head section.

  2. Keep in mind that the data- attributes have been changed to data-bs- in Bootstrap 5.

  3. Remember to wait for the DOM to fully load!

$(function () {
    $('.carousel').carousel({interval: 2000})
})

Check out the demo here

Answer №2

Carousel functionality is found within the code of bootstrap.js

To streamline your loading process, consider using this alternative method:

<script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="f99b96968d8a8d8b9889b9ccd7c9d7cb">[email protected]</a>/dist/js/bootstrap.min.js" integrity="sha384-cVKIPhGWiC2Al4u+LWgxfKTRIcfu0JTxR+EQDz/bgldoEyl4H0zUF0QKbrJ0EcQF" crossorigin="anonymous"></script>

Answer №3

According to the information provided in Bootstrap 5 options, it is possible to adjust the interval by utilizing data attributes like 

<div id="slides" class="carousel slide" data-bs-ride="carousel" data-bs-interval="1000">
. It's also important to note that certain syntax changes have been made in version 5.

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

My CSS content seems to be fitting correctly, but it appears larger than anticipated. Where have I gone

I've been working on customizing my webpage for mobile phones, but I've encountered an issue. When I use the inspect tool in Chrome to make the "screen" smaller, the webpage itself appears smaller but the body element size remains unchanged, as i ...

htmlcss

I am experiencing an issue with Safari where there is an unexpected rounded border appearing that

Upon inspecting the image, a slight border is visible behind the main border on Chrome and Firefox. However, Safari and iPhone display a rounded thin border instead. Can you help us understand why this discrepancy is happening and how we can remove it? P ...

htmlcsssafari

Transferring user-selected values from JavaScript to a PHP file

When sending values from JavaScript to a PHP file, everything works smoothly when all the values are collected. Step1 functions perfectly as both fields are mandatory. However, in Step2, values are only sent when all the fields are selected. There are co ...

javascriptphpjqueryhtml

Utilize a for loop to reference variable names with numbers

Is there a way to extract values from req.body.answerX without manually coding each one using a for loop? I currently have values stored as "answer1, answer2" and so on. This is what I tried: for( var i = 1; i <= 10; i++){ console.log(req. ...

javascriptnode.jsexpress

Scrollable content with sticky positioning using CSS3 and JavaScript

I successfully implemented a sidebar using the position: sticky property and it is functioning perfectly. To identify colors in the following text, refer to the script below. When scrolling, the black area remains fixed while the green area sticks to its ...

javascriptjqueryhtmlcss

The type 'Dispatch<SetStateAction<boolean>>' cannot be assigned to type 'boolean'

Currently, I am attempting to transfer a boolean value received from an onChange function to a state variable. let [toggleCheck, setToggleCheck] =useState(false);` <input type="checkbox" id={"layout_toggle"} defaultChecked={toggleCh ...

javascriptreactjstypescriptreact-hooks

Anchored text is obscured by a fixed Bootstrap 4 navigation bar at the top

I'm currently developing a website that utilizes bootstrap 4. I have successfully fixed the <nav> element to the top of the page using the fixed-top class. Despite applying padding-top to the <body> tag as recommended, I am encountering an ...

htmlcsstwitter-bootstrapbootstrap-4

Error in React Typescript Order Form when recalculating on change

When creating an order form with React TypeScript, users can input the quantity, unit price, and select whether the item is taxable. In this simplified example, only 1 or 2 items can be added, but in the final version, users will be able to add 10-15 item ...

javascriptreactjstypescriptasync-awaitreact-redux

Encountering an issue when using both the Google Maps API and Google URL Shortener API within the same program

Recently, I developed a program that involves passing data to an iframe through a URL. However, due to the limitation of Internet Explorer supporting only 2083 characters in a URL, I decided to use the Google URL Shorten API to shorten the URL before sendi ...

javascriptapigoogle-mapsurlgoogle-maps-api-3

Choose all elements by their class except for a particular container defined by the parent element's ID

Can you provide an example of translating the function below into utilizing the .not method (or not selector)? $(".CLASS").filter(function(i, e){ return (e.parentNode.id != "ID"); } ...

javascriptjquery

Exploring through a table using JavaScript

I am struggling to search a table within my HTML for a specific term. The code I have works to an extent, but it does not account for alternatives such as searching for "what is that" when I type in "What is that". Additionally, I need the script to ignor ...

javascripthtmlsearch

Extracting the nearest tag for a specific element by utilizing text containment in Selenium with Java

Is there a way to fetch the tag under which the text is visible without selecting parent elements that contain the same text when using getTagName for all tags? <ul> <li> The Text </li> </ul> In the example above, if we use contain ...

htmlseleniumselenium-webdriverautomated-tests

Execute my function when the Redux state changes in the store in ReactJS

I am facing a specific issue in my React-Redux application. I am using Redux-saga to communicate with a REST API, which does not return a promise. Within my application, I also utilize state (in addition to the store) that I wish to update after receiving ...

javascriptreactjsredux

Ways to show text on top of an image using CSS

Seeking help! I'm attempting to overlay some text on top of an image, here's the link: http://jsfiddle.net/5AUMA/31/ The challenge is aligning this text to the bottom part of the image. I've tried using this CSS: .head_img p { position ...

htmlcss

Removing the final element within a nested array: a step-by-step guide

let originalArray=[ [ "Test1", "4", "160496" ], [ "Test2", "6", "38355" ], [ "Test3", "1", "1221781" ], [ " ...

javascriptarraysangulartypescript

Iconic Side Navigation with collapsed button malfunctioning due to negative positioning

I'm facing two issues with my webpage. First: I have three buttons on the right side of my page that are supposed to behave like the buttons on this example. However, when you scroll, you can see that their position is incorrectly displayed "outside" ...

javascripthtmlcssbootstrap-4display

The response from the XHR object is coming back as "Object Object

Recently, I've been faced with the challenge of working with an API that provides articles. Within the array returned by the API, there are attributes like author, title, and description. However, despite my efforts, each time I attempt to retrieve th ...

javascriptarraysjson

Combining Three HTML Tags Into a Single Page

I currently have a standard PHP webpage that consists of the header, body, and footer sections. Within this setup, I use the following code: <?php include('header.html'); ?> The header.html file contains <html>... content </html& ...

phphtmlseotags

reveal the concealed divs within the list elements

html: In my HTML document, I have a unordered list (ul) with each list item (li) constructed like this: <li class="A">list-item <div>1</div> <div class="B">2 <div class="C">3</div> </div> ...

javascriptjquery

Here is a unique version of the text: "Implementing a JavaScript function in Angular to activate the data-bs

Attempting to use JavaScript in angular to close/hide a bootstrap5 modal, encountering an issue where the hide function in bootstrap is not working. When manually clicking a button with data-bs-dismiss attribute, it closes the modal as expected, but when t ...

javascriptangularbootstrap-modalbootstrap-5