Having issues with integrating a basic Bootstrap carousel in Angular 8

I am currently using Angular 8 in conjunction with Bootstrap version 4.5 and a Font Awesome kit. The specific component I am working on is called font-project. However, I have encountered an issue when trying to slide images within the carousel. Although the carousel indicator appears as a hyperlink with a cursor that looks like a thumb, it does not function correctly and remains stuck on the first image. When I click on the carousel control icon, it also acts as a hyperlink and displays an address in the bottom left corner as http://localhost:4200/font-project#example, but it does not change the image displayed.

Here is the code snippet I am attempting to troubleshoot:

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="60100f101005124e0a1320514e51564e51">[email protected]</a>/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js" integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV" crossorigin="anonymous"></script>

<section id="carousel" class="bg-primary py-5">
  <div class="container">
    <div class="row">
      <div class="col-md-8 mx-auto text-center">
        <div id="example" class="carousel slide" data-ride="carousel">
          <ul class="carousel-indicators">
            <li data-target="/font-project#example" data-slide-to="0" class="active"></li>
            <li data-target="/font-project#example" data-slide-to="1"></li>
            <li data-target="/font-project#example" data-slide-to="2"></li>
            <li data-target="/font-project#example" data-slide-to="3"></li>
          </ul>
          <div class="carousel-inner">
            <div class="carousel-item active"><img src="https://via.placeholder.com/500" alt="project" class="d-block w-100"></div>
            <div class="carousel-item"><img src="https://via.placeholder.com/500" alt="project" class="d-block w-100"></div>
            <div class="carousel-item"><img src="https://via.placeholder.com/500" alt="project" class="d-block w-100"></div>
            <div class="carousel-item"><img src="https://via.placeholder.com/500" alt="project" class="d-block w-100"></div>
          </div>
          <a href="/font-project#example" class="carousel-control-prev" data-slide="prev"><span class="carousel-control-prev-icon"></span></a>
          <a href="/font-project#example" class="carousel-control-next" data slide="next"><span class="carousel-control-next-icon"></span></a>
        </div>
      </div>
    </div>

  </div>
</section>

cssangularbootstrap-4slidercarousel

Answer №1

If you want to add sliding functionality, consider implementing the ui-carousel library.

To install, use: npm i angular-ui-carousel

For additional information, visit this link

Answer №2

It is important that the data-target for the indicators and the href attribute for the controls match the id of the top-most div: 

<div id="example" class="carousel slide" data-ride="carousel">
.

Ensure to remove "/font-project" from those attributes and correct the missing hyphen in data-slide for the last link to make it work:

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="b8c8d7c8c8ddca96d2cbf88996898e9689">[email protected]</a>/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js" integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV" crossorigin="anonymous"></script>

<section id="carousel" class="bg-primary py-5">
  <div class="container">
    <div class="row">
      <div class="col-md-8 mx-auto text-center">
        <div id="example" class="carousel slide" data-ride="carousel">
          <ul class="carousel-indicators">
            <li data-target="#example" data-slide-to="0" class="active"></li>
            <li data-target="#example" data-slide-to="1"></li>
            <li data-target="#example" data-slide-to="2"></li>
            <li data-target="#example" data-slide-to="3"></li>
          </ul>
          <div class="carousel-inner">
            <div class="carousel-item active"><img src="https://via.placeholder.com/500" alt="project" class="d-block w-100"></div>
            <div class="carousel-item"><img src="https://via.placeholder.com/500" alt="project" class="d-block w-100"></div>
            <div class="carousel-item"><img src="https://via.placeholder.com/500" alt="project" class="d-block w-100"></div>
            <div class="carousel-item"><img src="https://via.placeholder.com/500" alt="project" class="d-block w-100"></div>
          </div>
          <a href="#example" class="carousel-control-prev" data-slide="prev"><span class="carousel-control-prev-icon"></span></a>
          <a href="#example" class="carousel-control-next" data-slide="next"><span class="carousel-control-next-icon"></span></a>
        </div>
      </div>
    </div>

  </div>
</section>

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

Angular 2's NgFor directive is designed to work with data structures that can be iterated over,

Currently, I am implementing the Reactive form pattern in my Angular 2 project. The goal is to dynamically populate a container with answers that are fetched and populated using an http call. The structure of the Reactive form object is as follows: publi ...

javascriptangular

How can I assign a unique background color to each individual column within a RadioButtonList?

I have an issue with setting 3 repeated columns. I want to assign different background colors to each of them. If you have any ideas on how I can achieve this, please share. Here is the code for my RadioButtonList: <asp:RadioButtonList ID="rblTimeSlot ...

javascriptc#asp.netcssradiobuttonlist

Aligning a child div within a parent div by using absolute positioning for both

When creating my components dynamically using JS, I utilize position: absolute for both the parent and children elements to achieve the desired placement. But I've encountered an issue with centering a div within another div. Most solutions suggest m ...

javascriptcss

Adjusting animation placement when resizing the window

Is it possible to utilize jquery window.resize() to ensure that the positioning of the two donuts never interferes with the text in the middle of the home? I am unsure of how to connect the x and y values of the window size to adjust the top/left and botto ...

htmlcssanimationposition

What is preventing the inner box from stretching to match the width of the outer box?

This question isn't really related to academics, it's more of a work-related inquiry that I've simplified into a basic question. I placed one div inside another expecting the inner div to inherit the width of the outer div. Initially, this ...

htmlcss

Enhance the appearance of an angular custom component with unique styling

I have developed a unique custom angular element called my-component and in its stylesheet I've added the following: :host { display: inline-block; width: 55px; } Now, when using my-component in another component's template, I tried to ...

cssangularangular-components

The user type is not yet loaded from Firestore when the view is rendered

I am currently in the process of developing an Ionic - Angular application that allows hospital patients to submit requests to nursing staff, who can then view the assigned requests based on the patient's room. Nurses have access to all requests, whil ...

javascriptangularfirebasegoogle-cloud-firestoreionic4

Reversing the process of raycasting in Three.js

I am in the process of setting up an interactive world map on a curved plane that allows users to rotate and highlight countries. Upon clicking on a specific country, I am able to identify the selection and display a tooltip with relevant information about ...

javascriptcssthree.js

Resolved issue with header covering page content

https://i.sstatic.net/1PhFl.jpg The content underneath my fixed header is getting covered slightly by the header, rather than aligning perfectly with it. Ideally, the top of the carousel should be right below the bottom of the header to occupy the entire ...

htmlcssbootstrap-4

Tips for creating responsive designs with specific media queries for various device sizes

I am looking to create a responsive website using media queries and have already created different media queries for mobile, tablets, and desktops. However, I am unsure if I should be writing the same CSS code multiple times for various device sizes, such ...

htmlcssmedia-queries

Creating borders around Material UI grid items can be achieved by applying a border style to the

import React from 'react'; import { makeStyles } from '@material-ui/core/styles'; import Paper from '@material-ui/core/Paper'; import Grid from '@material-ui/core/Grid'; const useStyles = makeStyles((theme) => ({ ...

cssreactjsmaterial-ui

Master the art of displaying complete text when zooming in and elegantly truncating it when zooming out

I am currently working on a data visualization project using d3.js. The tree chart that I have created is functioning well, but I would like the text to react dynamically when zooming in and out. You can find the code for my project on this JSFiddle page. ...

javascriptcssd3.js

CSS rule: The behavior of my specified property is not being implemented

I have inserted an image directly into my HTML code, which serves as a small profile picture. I am attempting to position this image in the top right corner of my website, but no matter what CSS property I apply, the image refuses to budge. body { fon ...

css

Displaying image titles when the source image cannot be located with the help of JavaScript or jQuery

I am currently facing an issue where I need to display the image title when the image is broken or cannot be found in the specified path. At the moment, I only have the options to either hide the image completely or replace it with a default image. $(&apo ...

javascriptjquerycssimage

What steps should be taken to activate the close window button on this page?

I need help with my GUI because the closing button of the window is not responding when clicked. Here is the JSP code snippet: The JSP is <table width="100%" border="0" cellspacing="0" cellpadding="2" align="center" class="TB_nb"> <tr> &l ...

javascripthtmlcssjsp

Utilizing Session storage throughout an Angular 2 application

I currently store a session variable as a JSON value in my home.component.ts. This variable needs to be accessed in various locations within the application. This is my code snippet: .do(data => sessionStorage.setItem('homes', JSON.stringif ...

angulartypescript

What could be the source of this margin or spacing?

Within this test, I have noticed that there are 2 inline flex containers. Specifically, I am referring to the test scenario that states Next The flex containers are laid out inline. Despite the fact that there is some space between the containers, upon in ...

htmlcssflexbox

The webpage appears to be stuck and unresponsive to scrolling

Currently in the process of developing a website, I've integrated stellar.js for parallax effects and niceScroll.js to ensure smooth scrolling. However, I'm facing an issue where I am unable to scroll both horizontally and vertically. To address ...

jquerycssnicescrollstellar.js

Troubleshooting Problem with Card Layout in Basic Bootstrap Template

While using a basic Bootstrap template from Mobirise for my website, I ran into an issue. I am trying to create 5 Bootstrap cards with buttons in a row, instead of the maximum of 4 that is currently available. You can view an example of these cards here: ...

jqueryhtmltwitter-bootstrapbootstrap-4

CSS problem with padding and width

Currently, I'm working on a conditional rendering issue where I want to give a div full width but due to padding applied to its parent, it's not expanding to the container's full width. Here is the snippet of the code: import Image from &qu ...

cssreactjsnext.jstailwind-css