The sliding function of the Bootstrap slider appears to be malfunctioning

I'm having trouble getting my slider to work with the Bootstrap carousel. No matter what I do, the images don't slide when I click on the button.

After trying out several other Bootstrap sliders, I encountered the same issue. I searched for solutions on Stack Overflow, but all of them involved JavaScript implementations.

<div class="container">
        <div class="main">
            <div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel">
                <ol class="carousel-indicators">
                    <li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>
                    <li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
                    <li data-target="#carouselExampleIndicators" data-slide-to="2"></li>
                </ol>
                <div class="carousel-inner">
                    <a href="hkh.html">
                    <div class="carousel-item ">
                        <img class="d-block w-100" src="https://fortniteinsider.com/wp-content/uploads/2019/10/Fortnite-Chapter-2-Season-1-Loading-Screen-Leaked-2.jpg" alt="Third slide">
                        <div class="slidetoppage">
                        </div>
                        <div class="carousel-caption d-none d-md-block">
                            <h5>test title 3</h5>
                            <p>test desc</p>
                        </div>
                    </div>
                            </a>
                    <a href="gh.php">
                    <div class="carousel-item ">
                        <img class="d-block w-100" src="https://assets.pcmag.com/media/images/668289-fortnite-chapter-2.jpg?thumb=y&width=1280&height=720" alt="First slide">
                        <div class="slidetoppage">
                        </div>
                        <div class="carousel-caption d-none d-md-block">
                            <h5>test title 2</h5>
                            <p>test desc</p>
                        </div>
                    </div>
                            </a>
                    <a href="gooz.php">
                    <div class="carousel-item active">
                        <img class="d-block w-100" src="https://assets.pcmag.com/media/images/668289-fortnite-chapter-2.jpg?thumb=y&width=1280&height=720" alt="Second slide">
                        <div class="slidetoppage">
                        </div>
                        <div class="carousel-caption d-none d-md-block">
                            <h5>test title 1</h5>
                            <p>test desc</p>
                        </div>
                    </div>
                            </a>
                                    <a class="carousel-control-prev" href="#carouselExampleIndicators" 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="#carouselExampleIndicators" role="button" data-slide="next">
                    <span class="carousel-control-next-icon" aria-hidden="true"></span>
                    <span class="sr-only">Next</span>
                </a>
            </div>
        </div>
    </div>
    </div>
htmlcssbootstrap-4

Answer №1

Ensure that you include your js files by adding the following scripts:

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>

<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>

You can also refer to the Bootstrap Introduction page for detailed instructions: Bootstrap Introduction

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

When the browser is resized, the menus will automatically drop down

I am experiencing an issue with my horizontal menu bar code. The menu bar displays correctly for the resolution 1366 x 768, but when I press the ctrl - shortcut key and reduce the browser size using the same shortcut key, my menus move down. I have tried ...

htmlcss

Struggling with aligning two divs side by side on an HTML page

Recently, I've been experimenting with Electron and attempting to create 2 divs side by side. Despite trying various alignment options found here, nothing seems to be working for me. Here's the code I have so far: Code body, html { hei ...

htmlcss

Removing a section of HTML from an EmailMessage Body in EWS

Is there a way to remove certain parts of the EWS EmailMessage .Body.Text value in C# before replying with a ResponseMessage? The elements that need to be removed include clickable and non-clickable buttons in HTML format. Since custom tags cannot be dec ...

c#htmlcssexchangewebservices

What is the best way to implement Bootstrap 4 tabs in UI to trigger a post request with each button click?

Using bootstrap 4 with a bearer token in asp.net core 2.2, I am looking to implement tabs for better user navigation. Where should I begin? Reviewing my coworker's code, I noticed only one post method on the entire form. Is there a way to send data to ...

bootstrap-4asp.net-core-mvc

Expand the container as the child element grows using flexbox

Check out this layout: <div class="wrapper"> <div class="middleman"> <div class="inner-child"> /* Child with the ability to expand height */ </div> </div> </div> Imagine the wrapper has an initial hei ...

cssflexbox

Tips for convincing the React/MUI Theme Engine to apply namespaces to all MUI CSS rules?

Encountering an issue with React Apps imported as microfrontends. Our Landingpage (built in React/MUI) imports multiple Apps (created in React/MUI v4 or v5, designed to run independently with their own themes). The problem arises when each App creates its ...

cssreactjsmaterial-uithemes

What could be the reason behind ng-bind-html only displaying text and not the link?

Utilizing ng-repeat to exhibit a list on my webpage. One of the fields in my data contains a URL that I want to display as an actual link within my HTML page. Please refer to the screenshots below: My HTML: https://i.sstatic.net/2Gj1U.png My rendered pa ...

javascripthtmlangularjs

Unable to insert flag image into the <option> tag

Struggling to add a flag image to the options using any method (html,css)! <select> <option value="rus" selected>Rus</option> <option value="Uzb" >Uzb</option> <option value="eng">Eng</option> </s ...

htmlcss

Animating elements on a webpage can be achieved by using both

Is there a way to create an animation that moves objects based on button clicks? For example, when the "Monday" button is pressed, the object with the correct color will move down. If any other button like "Tuesday" is clicked, the previous object will mov ...

javascriptcss

Tips for assigning an ID to a span element within a for loop

I am facing a challenge where I need to assign IDs to span tags that do not have the id attribute. These IDs need to be assigned sequentially by incrementing through a for loop and passing my geneologicalSequenceNumber into each span tag. Can you guide me ...

javascripthtmljquery

The distance separating the top navigation bar from the sub-navigation menu

I have designed a navigation menu with a subnavigation section, view it on JSFiddle with subnavigation. My challenge is to create a 1px solid white separation between the top navigation (with yellow background) and the subnavigation (with red-colored backg ...

htmlcssnavigationbar

What causes the border to trigger the appearance of a scrollbar due to an overflow?

The first image display a scrollbar, while the second one does not. It all comes down to the .tabulator CSS class and specifically the border property. How come only a 1px border impacts the scroll feature instead of affecting the entire content? https: ...

htmlcss

Ways to modify the color of text in a hyperlink?

When working with hyperlink generation like the code snippet below, the typical blue color can be less than ideal. How can I dynamically change the font color of this hyperlink using JavaScript? $element.html(indicator.link(url)); ...

javascripthtmlcsshyperlink

Utilizing Django templates to display a dictionary containing nested tuples

Here's my dictionary: { '123': {'metric_1': [('url_1', 'caption_1'), ('url_2', 'caption_2'), ('url_3', 'caption_3'), ('url_4', 'caption_4')], 'met ...

pythonhtmldjangodjango-templatesnested-loops

Issue with automatic updating of table

One challenge I am facing involves the index.php file, which displays data in tables from a loop: $sql = 'SELECT id FROM usertbl'; $stmt = $hund->runQuery($sql); $stmt->execute(); $row = $stmt->fetchALL(PDO::FETCH_ASSOC); <?php fore ...

javascriptphphtmlajax

What is the proper way to nest a <frameset> tag?

Attempting to nest a frameset inside another frameset has proven unsuccessful for me. I attempted to use the <frame> tag but encountered some issues. <frameset rows="15%,85%"> <frame style="background-color: orangered"></frame> ...

html

Delete class at waypoints

I am currently using waypoints.js to manage a single-page website that includes a highlighted navigation feature. When the viewport reaches the element with the class "content", the corresponding navigation point is given the class "active". The script i ...

javascriptjqueryhtmlcssjquery-waypoints

Exploring React's Primary Button Color Implementation

I am attempting to customize the buttons in my theme for various states such as contained, primary, and hover. However, my current approach is not yielding the desired results. VIEW CODESANDBOX DEMO: CLICK HERE theme/overrides/MuiButton.js import palet ...

cssreactjsmaterial-uijss

Pass the callback function `cb_func` as a parameter to the `foobar` function when calling it in the `onclick`

I have an element that I want to trigger an onclick event with a callback function. Here is the code snippet: function cb_func() { alert("hello world!"); } function foobar(i, cb) { // do something if (cb != undefined) cb(); } onclic ...

javascriptjqueryhtml

AJAX functionality seems to be malfunctioning on mobile devices, although it is working properly on the Chrome developer tool

Hey there! I'm currently working on a client's website and encountering an issue with my AJAX call on a specific mobile page of the site. You can check out the page in question here. Interestingly, it seems like the header and footer are only mal ...

jquerycssajaxjquery-mobile