Troubles with the sliding feature on Bootstrap 4 Carousel

I'm encountering an issue with the bootstrap carousel as it's not sliding properly.

Here is my current code:

<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">
        <div class="carousel-item active">
            <img class="d-block w-100" src="../../../../assets/foto-1.jpg" alt="First slide">
        </div>
        <div class="carousel-item">
            <img class="d-block w-100" src="../../../../assets/foto-2.jpg" alt="Second slide">
        </div>
        <div class="carousel-item">
            <img class="d-block w-100" src="../../../../assets/foto-2.jpg" alt="Third slide">
        </div>
    </div>
    <a class="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-slide="prev">
        <span class="carousel-control-prev-icon" aria-hidden="true"></span>
    </a>
    <a class="carousel-control-next" href="#carouselExampleIndicators" role="button" data-slide="next">
        <span class="carousel-control-next-icon" aria-hidden="true"></span>
    </a>
</div>

In my index.html file, I include:

 <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

Can anyone provide assistance with this issue?

cssangularbootstrap-4

Answer №1

Oops, I completely overlooked importing JS! Thank you to Boss COTIGA for catching that mistake.

I realized that the JavaScript file was missing while trying to access getbootstrap.com/docs/4.1/getting-started/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

The Bootstrap data-target and aria-controls attributes are failing to activate the designated id element

I have implemented various elements to toggle the display of information on my HTML website. While I've successfully created buttons, nav-tabs, and modals, clicking on the trigger element doesn't reveal the associated content. I've even doub ...

htmljquerycssbootstrap-4bootstrap-modal

What could be the reason for my post container not functioning properly?

I am facing an issue with my HTML and CSS code. The container is not displaying as expected, specifically the green bar that should appear below the image. I suspect that the container's auto attribute is causing it to overlook the content inside. Can ...

htmlcsspostcontainers

Angular2: The NgFor directive is designed to work with Iterables like Arrays for data binding

I'm currently working on a university project to develop a web application consisting of a Web API and a Frontend that interacts with the API. The specific focus of this project is a recipe website. Although I have limited experience with technologies ...

javascriptjsonnode.jsangularangular2-routing

unable to verify identity through a web browser

When I try to launch my Android application built with Ionic 2 on my smartphone, I encounter this error: If you need a tutorial for the application, check out: https://medium.com/appseed-io/third-party-authentication-for-your-ionic-2-mobile-app-9fdd43169d ...

angularcordovaionic-frameworkionic2

Updating the alignment between two input mat-select in Angular materialAlternatively:Fine-tuning the reference between

I am currently working on an Angular 6 app: I have two mat-select inputs that I want to connect in a way that if the selected option in my First select is equal to the value 'AAA', then the Second select should be hidden. First Mat-Select -> ...

angulartypescriptangular-materialangular-material2angular-ng-if

The content of my menu is concealed within a DIV. It may remain hidden or malfunction

I am in the process of creating master pages. In one of the master pages, I have implemented a dropdown menu using jQuery and CSS. While it works perfectly fine on some pages, it seems to be hidden on others that contain a div element. This is because the ...

jqueryhtmlcss

Reconnect automatically SignalR client upon server restart

I am currently using ASP.NET Core SignalR within the ASP.NET Boilerplate project, and everything runs smoothly while the server is running. However, whenever I need to restart the server for any reason, I encounter these errors: https://i.sstatic.net/Thr ...

angularasp.net-coreaspnetboilerplateasp.net-core-signalr

get and enjoy streaming audio in Angular 8

Currently, I am facing an issue where I want the audio to play when the user clicks on the preview icon. Here is the HTML code: <audio controls> <source [src]="fileSource" type="audio/mp3"> </audio> This is my TypeScript code: file ...

javascriptangulartypescript

Unable to locate the iframe in the test scenario

I encountered this particular test case: Select Frame id=coach_frame63454108.cf1 Wait Until Element Is Visible ${ap.gui.header.appname} Page Should Contain Element ${ap.gui.header.appname} Page Should Contain Element ${ap.gui.hea ...

cssseleniumrobotframework

How can I conceal text using css in specific situations without risking a penalty from search engines?

Currently, I'm developing an illustration tool that needs to be visually appealing to users, while also being accessible to screen readers and search engines. Below is the HTML code I'm working with: <span class="card">A new idea is presen ...

htmlcss

Incorporating fresh data from a node.js backend to refresh a webpage section

I'm currently working on creating an app that can retrieve the song a user is currently listening to using a web scraper. While I've managed to direct users to the page and display the current song title, they must manually refresh the entire pag ...

htmlcssnode.jsexpressejs

Customize your Bootstrap design by selecting a background color that doesn't

Why is the dropdown background black when used in a bg-dark navbar but white when used outside of the navbar? I want to use a white dropdown in a dark navbar. Here is my complete code: MyCode Here is my navbar & dropdown: <nav class="na ...

htmlcssbootstrap-5

Efficiently incorporating multiple properties into one in Angular

Within my Angular service, I have defined variables in the following manner: export class MyService { someVariableA = 1; someParams = { someVariableB, otherVariable: this.someVariableA }; } In a component, I update 'someVariableA&a ...

javascriptangulartypescript

Navigating the structure of an Angular project: sorting modules by core, features, and

Before we begin, let me clarify that this question is original and has not been asked before. I have thoroughly reviewed the angular guide on this topic. However, I still find myself with a handful of questions. Starting with feature modules - the concept ...

angular

The value of an Angular rxjs BehaviorSubject can be updated using the value property directly, without calling

While testing my code, I stumbled upon unexpected mutation. Perhaps I am doing something wrong. User constructor( public id: number, public education: Education[] ){} UserStateService private user = a new BehaviorSubject<User>(null); setUser(us ...

angulartypescriptrxjs

Is there a way to dynamically assign the background color of a webpage based on the exact width and height of the user's screen?

I have customized the CSS of my website by setting the height to 800px and width to 1050px. Additionally, I have chosen a blue background-color for the body tag. It is important that the entire application adheres to these dimensions. However, when viewe ...

asp.netcss

adjusting the color of ion-button when hovering over the cancel button

I'm working on a button bar for my app and I want the color of the button to change based on its state (false, true). Currently, the button starts out green, turns light green when hovered over, and becomes white when clicked. Once I click it, the bu ...

javascripthtmlcssionic-framework

Ways to set Material UI tabs as active exclusively for particular URLs

Looking for a solution to address a conflict arising from the active tab indicator being located on the right tab. Within my navbar, I have tabs leading to three different routes, two of which are quite similar. <Tabs indicatorColor="primary" ...

javascriptcssreactjsmaterial-uireact-router-dom

Tips for eliminating the space within the '<td>' border tags

I am attempting to replicate the first table, but I keep getting results similar to the second table instead. My approach involved creating a table and filling the <td> tags with labels. However, after setting the borders to dark, there are unwanted ...

htmlasp.netcssuser-interface

Struggling with setting up a search bar for infinite scrolling content

After dedicating a significant amount of time to solving the puzzle of integrating infinite scroll with a search bar in Angular, I encountered an issue. I am currently using Angular 9 and ngx-infinite-scroll for achieving infinity scrolling functionality. ...

javascripthtmlangulartypescriptinfinite-scroll