What could be causing my Bootstrap Carousel to malfunction?

Currently, I am developing a MEAN stack application with Angular 7. In this project, I have incorporated a Bootstrap Carousel, but unfortunately, it seems to be malfunctioning.

#slider .item {
  height: 500px;
}

.carousel-caption {
  font-size: 18px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<!--all above is necessary for bootstrap to function in this snippet-->


<div class="carousel slide" id="slider" data-ride="carousel">
  <!--indicators-->
  <ol class="carousel-indicators">
    <li data-target="#slider" data-slide-to="0" class="active"></li>
    <li data-target="#slider" data-slide-to="1"></li>
    <li data-target="#slider" data-slide-to="2"></li>
  </ol>
  <div class="carousel-inner">
    <div class="item active">
      <img src="../../assets/public/RoadTipsMain.jpg" style="width: 100%">
      <div class="carousel-caption">
        <h4>Welcome</h4>
        <p>Travel! Enjoy!</p>
      </div>
    </div>

    <div class="item" id="slide2">
      <img src="../../assets/public/5.jpg" style="width: 100%">
      <div class="carousel-caption">
        <h4>Welcome</h4>
        <p>Travel! Enjoy!</p>
      </div>
    </div>

    <div class="item" id="slide3">
      <img src="../../assets/public/cardrive.jpg" style="width: 100%">
      <div class="carousel-caption">
        <h4>Welcome</h4>
        <p>Travel! Enjoy!</p>
      </div>
    </div>

  </div>
  <a class="left carousel-control" href="#slider" data-slide="prev" role="button"><span class="icon-prev"></span></a>
  <a class="right carousel-control" href="#slider" data-slide="next" role="button"><span class="icon-next"></span></a>
</div>

I am puzzled as to where the error may lie in my code. Could it be possible that #slider is incompatible with Angular 7?

htmlcssbootstrap-4angular7

Answer №1

As previously mentioned here (noted as duplicate but no action was taken):

In order for the carousel to function correctly, all items (images) must have the class carousel-item instead of just item. The same applies to the Previous and Next buttons. They should be assigned the classes carousel-control-prev and carousel-control-next respectively, instead of just carousel-control.

The rest of the code appears to be in working order! When dealing with Bootstrap, it's crucial to pay attention to the class names as they need to be precise for everything to work properly. (You can likely remove the popper.js script at the bottom since it is not utilized at all.)

Therefore, simply change all instances of <div class="item"> to 

<div class="carousel-item">
and add -next and -prev to the control classes as demonstrated here:

#slider .carousel-item {
  height: 500px;
}

.carousel-caption {
  font-size: 18px;
}

.carousel-item>img {
  width: 100%
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<!--all above is necessary for bootstrap to function in this snippet-->



<div class="carousel slide" id="slider" data-ride="carousel">
  <!--indicators-->
  <ol class="carousel-indicators">
    <li data-target="#slider" data-slide-to="0" class="active"></li>
    <li data-target="#slider" data-slide-to="1"></li>
    <li data-target="#slider" data-slide-to="2"></li>
  </ol>
  <div class="carousel-inner">
    <div class="carousel-item active">
      <img src="https://picsum.photos/1000/600/">
      <div class="carousel-caption">
        <h4>Welcome</h4>
        <p>Travel! Enjoy!</p>
      </div>
    </div>

    <div class="carousel-item" id="slide2">
      <img src="https://picsum.photos/1000/600/">
      <div class="carousel-caption">
        <h4>Welcome</h4>
        <p>Travel! Enjoy!</p>
      </div>
    </div>

    <div class="carousel-item" id="slide3">
      <img src="https://picsum.photos/1000/600/">
      <div class="carousel-caption">
        <h4>Welcome</h4>
        <p>Travel! Enjoy!</p>
      </div>
    </div>

  </div>
  <a class="carousel-control-prev" href="#slider" 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="#slider" role="button" data-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="sr-only">Next</span>
  </a>
</div>

Answer №2

I am encountering a similar issue as well. Make sure to review the Getting Started carousel focused on Dependency again.

Remember to include BootstrapCDN (content delivery network) in your HTML file:

This is how I have set up my BootstrapCDN in my workspace:

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.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

Navigational tabs have been implemented in multiple independent sets, eliminating the need for multiple scripts to manage hiding content on click events

In a previous inquiry, I sought guidance on achieving a specific tab functionality like the one depicted below: https://i.stack.imgur.com/s2Gm8.png The query led to an insightful suggestion from @BradleyCoupland, who provided the following code snippet: ...

htmltwitter-bootstrap

Obtain the index by clicking on an element within an HTMLCollection

Within my HTML code, I have 9 <div> elements with the class ".square". I am looking to make these divs clickable in order to track how many times each one is clicked and store that information in an array. For example, if the fifth <div> is c ...

javascripthtml

Using XSLT to convert HTML into the desired text format

It has been almost two decades since my last encounter with XSLT. I am attempting to transform documents, like the HTML snippet below, into the desired output. <p> おばあさんは、とても <ruby><rb>喜</rb><rp>(</rp ...

htmlxmlxslt

The rating and comment section is failing to adapt to smaller screens, creating a terrible user experience

I am a beginner with Sass and CSS. I wanted to create a rating and comment section which looks fine on a laptop screen, but appears off on smaller screens. It seems like the layout might be incorrect or maybe I didn't follow grid layout guidelines pro ...

cssbootstrap-4sass

:after functionality not operating properly in Internet Explorer

The titles on this page have arrows displayed before them using a special styling. However, there seems to be an issue with how it displays on Internet Explorer. // edit : I made a mistake, my styling is actually on paragraph tags 'p'. Maybe tha ...

htmlcsscross-browsercross-platform

Is it feasible to use both position absolute and position sticky at the same time? If so, how can this be accomplished?

Is there a way to keep an element fixed on the display without using position: fixed? I want the element to always remain above other elements, so I used z-index. Additionally, I would like the element to be able to move horizontally without scrolling acro ...

htmlcss

Utilizing JavaScript Files Instead of NPM as a Library for Open Layers: A Step-by-Step Guide

I've been attempting to get Open Layers to function in my Eclipse web development environment, but I've encountered some challenges along the way. The setup instructions provided on the Open Layers website focus mainly on using npm. Nevertheless, ...

javascripthtmlnpmopenlayers

I created a customized version of jQuery tabs, but I am looking for an external link to display the tab content and to style the original navigation

I've been experimenting with modifying a tabs script in jQuery that I came across. It seems like my attempt to enhance it has made things more complex than necessary. While I know creating tabs with jQuery is simple, I wanted to create my own version ...

javascriptjqueryhtmlcss

Add a CSS and jQuery hover effect to display text over an image, requiring users to click twice on their mobile device

I have a bunch of panels for different categories that change the background image when hovered over, display some introductory text, and lead to a URL when clicked. However, on mobile devices, you need to tap the panel twice to activate the URL. What I&a ...

javascriptjqueryhtmlioscss

Unexpected outcomes when generating jQuery pages using CSS

I have created a piece of JavaScript code that populates 3 divs with icons in even rows. However, I am facing an issue where my first two rows align as expected, but the third row starts aligned with .col-5. Can you help me troubleshoot this? function row ...

javascriptjqueryhtmlcsscss-float

Can you share the outcomes of executing a Node.js program in real-time?

Is there a method to execute a program (such as tcpdump) and have nodejs capture the console output in real-time to display in an HTML format without saving it? I am interested in running a program that displays information in the console, with the capabi ...

javascripthtmlnode.jsbashshell

JavaScript query-string encoding

Can someone clarify why encodeURI and encodeURIComponent encode spaces as hex values, while other encodings use the plus sign? I must be overlooking something. Appreciate any insights! ...

javascripthtml

A guide on verifying the percentage value of an element's height in Selenium with Java

I was able to retrieve the element's height in pixels using: element.getCssValue("height") However, the height returned was: Height: 560px What I actually need is for the height to be displayed as: Height: 100% Or perhaps Height: 50% ...

javacssseleniumselenium-webdriver

Is it possible to align the navigation within the Bootstrap (5) grid structure like I have shown in my example?

Can this be achieved? Any tips on how to do it while sticking within the Bootstrap framework would be greatly appreciated. Text blocks should align with the navigation border on the left and right side: <link rel="stylesheet" href="https://cdn.jsd ...

htmlcsstwitter-bootstrapbootstrap-5bootstrap-grid

Urllib2 retrieves HTML source code from various websites

Seeking assistance with retrieving the HTML code of a specific page using urllib2. The code provided is not giving me the exact HTML as displayed in my browser... Here is my current code: import urllib2 request = urllib2.Request('http://fiverr.com/l ...

pythonhtmlwebscreen-scrapingurllib2

Center two lines of text in a div in a vertical fashion

After going through several articles on this topic, I've picked up some tricks for vertical alignment like using line-height for a single line of text, display:table for multiple divs, and Flexbox in CSS3. However, I'm still struggling to align t ...

htmlcssflexbox

Looking to create an anchor tag that navigates to a specific ID on the page while accommodating a fixed header placement

In my application, the homepage's carousel displays multiple images with dynamically generated anchor tags that link to different routes. When clicking on the anchor tag, the page scrolls to the linked image but is obstructed by a fixed header. I want ...

javascripthtmlcssnode.jsanchor

a new webpage beginning from a different location

Starting from scratch here, I must apologize for not providing any code upfront. The issue at hand is this - I've got a page full of information sorted by ID (retrieved from the database). These IDs are linked from another page where users can click ...

htmlcss

Tips for customizing the back button in Ionic 3

<ion-header> <ion-navbar> <ion-buttons left> <button ion-button navPop icon-only> <ion-icon ios="ios-arrow-back" md="nbsons-arrow-back"></ion-icon> </button> </ion-buttons> <ion-title> ...

javascripthtmlangularionic3

What is the best way to enlarge a thumbnail using CSS?

Is there a way to resize an image without distortion? I am struggling with resizing a 70px thumbnail image to 200px X 165px while maintaining the aspect ratio. Currently, when I set the width to 200px and height to 165px, it stretches the image. Below is ...

htmlimagecss