Issue with Bootstrap4 Carousel not scrolling horizontally

I'm currently working on creating a carousel following the Bootstrap code snippet page. It features three images and is designed to have slide controls that move left and right. The script tags with the necessary scripts are located at the bottom of the file.

<!doctype html>

<head>
  <link rel="stylesheet" href="css/main.css">
  <link rel="stylesheet" href="css/bootstrap.min.css">
</head>

<nav class="navbar navbar-expand-lg navbar-light bg-light fixed-top">
    <div class="container">
      <a class="navbar-brand" href="#">Wantrepreneur</a>
          ...
<script src="js/vendor/bootstrap.bundle.min.js"></script>
<script src="js/vendor/jquery.slim.min.js"></script>


</html>

Despite following the instructions and including all the necessary scripts, I encountered an issue where clicking the control buttons does not result in image sliding or changing. The browser link changes from link.com to 

link.com#carouselExampleIndicators
, but the expected behavior doesn't occur. How can I resolve this problem?

Sincerely, Vinny

javascripthtmlcssbootstrap-4

Answer №1

Here's a common script loading problem. jQuery is required for Bootstrap to work, however, in your code, you have loaded Bootstrap before jQuery. To fix this, simply switch the order of the scripts:

<script src="js/vendor/jquery.slim.min.js"></script>
<script src="js/vendor/bootstrap.bundle.min.js"></script>

Answer №2

Prior to the launch of bootstrap 5,

In Bootstrap < 5, reliance on jQuery was required:-

Therefore, you had to ensure the sequence of the external scripts in your html code:-

It had to be:-

<script src="js/vendor/jquery.slim.min.js"></script>
<script src="js/vendor/bootstrap.bundle.min.js"></script>

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

What causes the slowness of onsubmit=" " function?

Initially, I had the following setup: HTML: <form onsubmit="return validate()"> ... <input type="submit" id="submit-button"/> </form> JS: function validate() { // Extensive validation process with regex and more... $(& ...

javascriptjqueryhtmlvalidation

Unable to add JSON data to Javascript List Object? Consider using a combination of Node.JS and Firebase for a

router.get('/getMeals',function(req,res){ var mealsList = []; mealsList.push("bar"); mealsRef.on("value",function(data){ data.forEach(function(child){ console.log(child.val()); var newMeal = child ...

javascriptnode.jsfirebase-realtime-database

Struggling with Angular 8: Attempting to utilize form data for string formatting in a service, but encountering persistent page reloading and failure to reassign variables from form values

My goal is to extract the zip code from a form, create a URL based on that zip code, make an API call using that URL, and then display the JSON data on the screen. I have successfully generated the URL and retrieved the necessary data. However, I am strug ...

javascripthtmlangulardom

What are the steps to create a CSS 'shell' design?

How can I create an image displayed as a circle with border-radius:50%, along with some text on the same line that has a set width and background color? I want to achieve this without hard coding values. What is the best approach to do this? Check out the ...

htmlcsscss-shapes

Switch up the arrangement of layout rows and columns using Bootstrap and CSS

On my desktop screen, the order of cols in Bootstrap is as follows: COL-A COL-B COL-C <div class"container"> <div class="row"> <div class="col-lg-4 col-md-4">Text 1</div> <div class="col-lg-4 col-md-4"><img sr ...

cssbootstrap-4

Switching Story Tense on Facebook Open Graph

After creating a unique story for my facebook app, I discovered that when making a basic story post using the facebook js sdk, the resulting post is in past tense and depicts the object in singular form. For example, instead of saying: John is eating an a ...

javascriptfacebookfacebook-javascript-sdkfacebook-opengraph

Is it necessary to use block elements when specifying image dimensions in HTML?

I have encountered a unique scenario where I want to set a pre-determined height for an HTML img element before it finishes loading. This is crucial because this height will be utilized in a calculation that may occur before the image is completely loaded, ...

htmlcss

The align-middle Bootstrap class does not seem to be working within the specified div

I want to vertically align text (<span class="align-middle">middle</span>) in the center of a div. Here is the code snippet: <div class="col-4 shadow product-added"> <div class="row"> <div cla ...

htmlcsstwitter-bootstrap

Troubleshooting Boostrap Check Box Styling Problem in MVC 5

My registration form has a problem with the checkbox's alignment. I want the text to appear to the left of the checkbox, in line with the placeholders for the input fields on the page. Currently, the text is either above the checkbox (centered in its ...

csshtmlasp.net-mvc-5

The HTML5 camera feature remains active even after navigating to a different page in an AngularJS application

I am currently exploring the video capabilities of HTML5. Using a directive userMedia, I have successfully activated my camera on my MacBook through navigator.getUserMedia() (using an adapter for cross-browser compatibility with supported browsers). Howev ...

javascripthtmlvideocameraangularjs

Ways to extract information from a JSON array based on its length and content

Here is an example of some data: { "_id": ObjectId("528ae48e31bac2f78431d0ca"), "altitude": "110", "description": [ { "id": "2", "des": "test" } ], "id": "1", "latitude": "24.9528802429251", ...

javascriptarraysjsonnode.jsapache-poi

Deactivating and activating an HTML input button

So I was tinkering with this cool button: <input id="Button" type="button" value="+" style="background-color:grey" onclick="Me();"/> I've been wondering, how can I conveniently control its state of being disabled or enabled? Initially, I attem ...

javascriptjquery

Chrome extensions using Cross-Origin XMLHttpRequest

Chrome extensions API states that cross-origin calls using the XMLHttpRequest object should be allowed with proper permissions: An extension can communicate with remote servers beyond its origin by requesting cross-origin permissions. Following the Goog ...

javascriptajaxgoogle-chromegoogle-chrome-extensionxmlhttprequest

Transforming the output from a processor into an array structure

Being a newcomer in the field of development, I have a question about how to retrieve data based on my requirements and what is considered the best practice? This is the structure of my design: JavaScript (Ajax call) >> ashx handler (Access databa ...

c#javascriptjqueryasp.net

Moving away from using Textarea, an alternative option is editable divisions. However, the issue arises when input

When using the following code: <div contentEditable="true" name="content"></div> instead of a Textarea in a form, I am unable to submit the input taken from the editable division above. The reason for using an editable division is to dynamic ...

phphtmlformstextarea

Using Angular: A guide to setting individual values for select dropdowns with form controls

I am working on a project that involves organizing food items into categories. Each item has a corresponding table entry, with a field indicating which category it belongs to. The category is represented by a Guid but displayed in a user-friendly format. C ...

javascriptjqueryangulartypescript

Employing $http.post in conjunction with res.redirect without handling the promise fulfillment

When making an $http.post call to my server, I send user data like this: $http.post('/streamdb/create/',{user:$scope.user.username}) After performing some operations on the server and retrieving a specific id from the DB, I want the client to b ...

javascriptnode.jsangularjsexpressresponse.redirect

How to make divs occupy the entire space of a parent div?

I've been scouring the website for a solution, but nothing I've found has been helpful. I'm attempting to create a grid within a containing div where a default (and eventually user-specified) number of divs will fill up the space. I'm t ...

javascriptjquerycss

Concealing buttons and Enabling others using ajax

I am facing a situation where I need to modify the behavior of a modal window on my webpage. The modal currently has two buttons for confirmation and cancellation, as shown in the code snippet below. Inside this modal, there is a <div class = "resp"> ...

javascriptphpjqueryhtmlajax

What are the drawbacks of automating the process of generating charts to track time spent on webpages?

!RESOLVED! I am looking to automatically generate charts based on users and their time spent on different pages of a website. I have a file named "log.xml" where I store user information (customers), visited pages, dates, and the time they spent; once I ...

javascriptjqueryxmlajaxjqplot