Bootstrap 4's carousel feature is currently malfunctioning

I'm trying to create a carousel using Bootstrap 4 and I've written the code below. However, only the first slide is showing up and I can't seem to get the other slides to display even with the controls. Can someone help me figure out what's wrong with the code?

carousel.js

<html>

<head>
    <title> Carousel</title>
  
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/javascript.util/0.12.12/javascript.util.min.js"></script>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">


    <title>Carousel</title>
    <style>
    </style>
</head>

<body>


    <div class="container">
        <h2>Carousel Example</h2>
        <div id="carouselExampleControls" class="carousel slide" data-ride="carousel">

            <!-- Wrapper for slides -->
            <div class="carousel-inner">

                <div class="carousel-item active">
                    <img  class="d-block w-100" src="Desert.jpg" alt="Desert" style="width:100%;">
                   
                </div>

                <div class="carousel-item">
                    <img  class="d-block w-100" src="Hydrangeas.jpg" alt="Hydrangeas" style="width:100%;">
                    
                </div>

                <div class="carousel-item">
                    <img class="d-block w-100" src="Jellyfish.jpg" alt="Jellyfish" style="width:100%;">
                    
                </div>

            </div>

            <!-- Left and right controls -->
            <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>
    </div>
</body>

</html>
javascriptbootstrap-4carousel

Answer №1

The Bootstrap JavaScript plugins are missing, causing the slide behaviors of the carousel code to not work properly. To resolve this issue, include the following script inside the <head> section:

<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js" integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV" crossorigin="anonymous"></script>

Here is a working example:

<html>
  <head>
    <title> Carousel</title>

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/javascript.util/0.12.12/javascript.util.min.js"></script>
    
    <!-- Bootstrap CSS and JS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js" integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV" crossorigin="anonymous"></script>
  </head>
  <body>
    <div class="container">
      <h2>Carousel Example</h2>
      <div id="carouselExampleControls" class="carousel slide" data-ride="carousel">

        <!-- wrapper for slides -->
        <div class="carousel-inner">
          <div class="carousel-item active">
            <img class="d-block w-100" src="https://placehold.it/100x101" alt="Desert" style="width:100%;">
          </div>
          <div class="carousel-item">
            <img class="d-block w-100" src="https://placehold.it/100x102" alt="Hydrangeas" style="width:100%;">
          </div>
          <div class="carousel-item">
            <img class="d-block w-100" src="https://placehold.it/100x103" alt="Jellyfish" style="width:100%;">
          </div>
        </div>

        <!-- left and right controls -->
        <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>
    </div>
  </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

CRUD operations are essential in web development, but I am encountering difficulty when trying to insert data using Express

I am currently attempting to add a new category into the database by following the guidelines provided in a course I'm taking. However, I am encountering difficulties as the create method does not seem to work as expected. When I try it out in Postman ...

javascriptnode.jsmongodbexpressmongoose

What could be causing all of my Bootstrap accordion panels to close at once instead of just the one I selected?

When implementing Bootstrap accordions in my projects, I encountered an issue where closing one accordion would cause the others to also close when reopened. To address this problem, I utilized the collapse and show classes in Bootstrap to enable users to ...

javascripthtmlcssbootstrap-5accordion

Tips for generating multiple instances of a JavaScript function on a single page

Consider the following JavaScript code snippet : var from,to; to = $(".range-to-dt").persianDatepicker({ inline: true, minDate: new persianDate(cleanDate(serverDateTime)), altField: '.range-to-dt-alt', altFormat: ...

javascriptjquery

"Utilize axios in React to interpret and handle error bodies captured through parsing as a ReadableStream

When I sent a post request using axios in a React form to a PHP server, I encountered an issue where the error returned a ReadableStream in its body. However, when I used Postman, I did not have this problem and received readable errors instead. How can I ...

javascriptphpnode.jsreactjsaxios

Node.js Express is finding Postman to be devoid of any data

I'm currently working on a basic website and facing an issue when trying to send JSON data to the API. Strangely, the JSON data is received as empty when sent using html/js, but it works perfectly fine when sent through Postman. The setup includes a ...

javascriptjqueryjsonajaxnode.js

Tips for synchronizing with animation completion in ui-router's $stateChangeStart event

Incorporating AngularJs and ui-router in my project has been a smooth process. One particular requirement I have is to gently fade out the current view when a user clicks on a link, before navigating them to another view. To achieve this, I have created ...

javascriptjqueryangularjsjquery-animateangular-ui-router

What is more effective: utilizing document fragments or string concatenation for adding HTML to the DOM?

My task involves adding a collection of cards to the DOM. html <div class="card"> <div class="card-title">Card 1</div> <div class="card-subtext">This is card 1</div> </div> js let ...

javascripthtmlperformancedom

When employing TypeScript, an error pops up stating "cannot find name 'ObjectConstructor'" when attempting to use Object.assign

I am rephrasing my query as I realized it was unclear earlier. I have an API that is sending me data in the following format: {"photos":[{"id":1,"title":"photo_1_title"}]} In my code, I have a variable called photos and a function named getPhotos() For ...

javascripttypescript

Issue: The variable cubeMaterial has not been defined in the JavaScript code

I've encountered an issue with my JavaScript code. I'm getting an error related to the line: this.color = cubeMaterial.color.getHex(); As a beginner, I'm having trouble understanding what I'm doing wrong. I attempted declaring the ...

javascript3dthree.js

I am interested in shuffling the letters within words that I receive from the input in my textarea

Is there a way to modify some of the letters in certain words entered into a textarea without changing the order of the words? I'm looking to shuffle around the letters within specific words rather than scrambling the entire sentence. I considered ut ...

javascripthtmlrandomoutputtextarea

Creating a file object in NodeJS with a specific file path - a step-by-step guide

Is there a way to create a File object in NodeJS using the path of an existing file, similar to how it can be done on the client side? In other words, is there an equivalent function in NodeJS to achieve the following: function srcToFile(src, fileName, mi ...

javascriptnode.jsfile

Internet Explorer is surprisingly accurate when it comes to Number.prototype.toFixed functionality

Imagine this scenario: var x = 2.175; console.log(x.toFixed(2)); // 2.17 It may seem surprising, but it's actually expected behavior. The Number literal 2.175 is stored in memory slightly less than the actual value due to IEEE-754 rules. This can b ...

javascriptinternet-explorerfloating-point

Issue with AngularJS expression not functioning as expected in Chrome for setting input type to "file"

I have encountered a strange bug while working on an Angular form builder application. The issue arises in Chrome when I try to dynamically set the input type based on a variable. Surprisingly, this method works perfectly for all input types except "file", ...

javascripthtmlangularjs

Customizing the active state of a Dropdown Item in Bootstrap version 4.5

Recently, I've embarked on the journey of creating my own theme using a combination of SASS and Bootstrap. However, I've hit a little snag when it comes to achieving the desired active appearance for a dropdown item within a navbar. To be complet ...

cssbootstrap-4sasskoala

Getting information in the constructor

Is it considered beneficial to retrieve data in the JavaScript class constructor method? For example, in a React class constructor, most tutorials recommend fetching data in the componendDidMount() method. However, there is little explanation as to why we ...

javascriptreactjs

Preserve multiple selected values post form submission using PHP, HTML, and JavaScript

How can I retain the selected values in a form after it is submitted? My current code functions correctly when only one value is selected, but does not maintain all selected values when multiple are chosen simultaneously. Any assistance would be apprecia ...

javascriptphphtmlforms

Tips for selecting the right decorator for your space

I am working on developing a game that utilizes an AI. This AI's API consists of 3 methods implemented in an Angular Service Here is a simplified version of the code: app.service('AI', [function(){ return { offer: angular.noop, ...

javascriptangularjsangular-decorator

Tips for integrating Google WebKit with AngularJS

Looking to enhance my application with Google WebKit functionality. My goal is to create a feature similar to Gmail's where hovering over the "+" symbol expands to display options such as "insert photos" and "insert links". I'm just starting out ...

javascriptangularjswebkit

Tips for concealing an element with Clippy.js without relying on a timeout feature

Recently, I stumbled upon a fascinating JavaScript library called Clippy.js that allows you to incorporate Microsoft Word's classic virtual assistants into your web browser. While experimenting with it, I discovered that the text balloon vanishes afte ...

javascriptjquery

Echarts: scatter plots linked with a line to the axis (resembling the PACF diagram)

I am currently working with echarts (js). Is there a method to link the dot of the scatter plot with the 0 value on the y-axis? I want it to resemble a pacf plot, similar to this example: The desired outcome should look something like this: https://i.sta ...

javascriptlinescatter-plotecharts