The slideshow feature in Bootstrap carousel seems to be malfunctioning

I can't seem to get my Bootstrap carousel slideshow to work properly. When I run the code in my Angular app.component.html, only the first image loads with no animations or response to control buttons. I've checked all the CDNs and they are working fine. What could be causing this issue?

<!DOCTYPE html>
<html lang="en>
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8>
  <meta name="viewport" content="width=device-width, initial-scale=1>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js></script>
  <style>
  .carousel-inner > .item > img,
  .carousel-inner > .item > a > img {
      width: 70%;
      margin: auto;
  }
  </style>
</head>
<body>

<div class="container>
  <br>
  <div id="myCarousel" class="carousel slide" data-ride="carousel>
    <!-- Indicators -->
    <ol class="carousel-indicators>
      <li data-target="#myCarousel" data-slide-to="0" class="active></li>
      <li data-target="#myCarousel" data-slide-to="1></li>
      <li data-target="#myCarousel" data-slide-to="2></li>
      <li data-target="#myCarousel" data-slide-to="3></li>
    </ol>

    <!-- Wrapper for slides -->
    <div class="carousel-inner" role="listbox>

      <div class="item active>
        <img src="../assets/images/6.png" alt="Chania" width="460" height="345>
        <div class="carousel-caption>
          <h3>Chania</h3>
          <p>The atmosphere in Chania has a touch of Florence and Venice>
        </div>
      </div>

      <div class="item>
        <img src="../assets/images/7.png" alt="Chania" width="460" height="345>
        <div class="carousel-caption>
          <h3>Chania</h3>
          <p>The atmosphere in Chania has a touch of Florence and Venice>
        </div>
      </div>

      <div class="item>
        <img src="../assets/images/8.png" alt="Flower" width="460" height="345>
        <div class="carousel-caption>
          <h3>Flowers</h3>
          <p>Beautiful flowers in Kolymbari, Crete>
        </div>
      </div>

      <div class="item>
        <img src="../assets/images/9.png" alt="Flower" width="460" height="345>
        <div class="carousel-caption>
          <h3>Flowers</h3>
          <p>Beautiful flowers in Kolymbari, Crete>
        </div>
      </div>

    </div>

    <!-- Left and right controls -->
    <a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev>
      <span class="glyphicon glyphicon-chevron-left" aria-hidden="true></span>
      <span class="sr-only>Previous>
    </a>
    <a class="right carousel-control" href="#myCarousel" role="button" data-slide="next>
      <span class="glyphicon glyphicon-chevron-right" aria-hidden="true></span>
      <span class="sr-only>Next>
    </a>
  </div>
</div>

</body>
</html>
htmlcssbootstrap-4

Answer №1

Great news! Your code is functioning correctly. The issue may lie within a file path or external JS or CSS. Please provide those as well so we can investigate further.

<!DOCTYPE html>
<html lang="en>
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
  <style>
  .carousel-inner > .item > img,
  .carousel-inner > .item > a > img {
      width: 70%;
      margin: auto;
  }
  </style>
</head>
<body>

<div class="container">
  <br>
  <div id="myCarousel" class="carousel slide" data-ride="carousel">
    <!-- Indicators -->
    <ol class="carousel-indicators">
      <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
      <li data-target="#myCarousel" data-slide-to="1"></li>
      <li data-target="#myCarousel" data-slide-to="2"></li>
      <li data-target="#myCarousel" data-slide-to="3"></li>
    </ol>

    <!-- Wrapper for slides -->
    <div class="carousel-inner" role="listbox">

      <div class="item active">
        <img src="../assets/images/6.png" alt="Chania" width="460" height="345">
        <div class="carousel-caption">
          <h3>Chania</h3>
          <p>The atmosphere in Chania has a touch of Florence and Venice.</p>
        </div>
      </div>

      <div class="item">
        <img src="../assets/images/7.png" alt="Chania" width="460" height="345">
        <div class="carousel-caption">
          <h3>Chania</h3>
          <p>The atmosphere in Chania has a touch of Florence and Venice.</p>
        </div>
      </div>

      <div class="item">
        <img src="../assets/images/8.png" alt="Flower" width="460" height="345">
        <div class="carousel-caption">
          <h3>Flowers</h3>
          <p>Beautiful flowers in Kolymbari, Crete.</p>
        </div>
      </div>

      <div class="item">
        <img src="../assets/images/9.png" alt="Flower" width="460" height="345">
        <div class="carousel-caption">
          <h3>Flowers</h3>
          <p>Beautiful flowers in Kolymbari, Crete.</p>
        </div>
      </div>

    </div>

    <!-- Left and right controls -->
    <a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
      <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
      <span class="sr-only">Previous</span>
    </a>
    <a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">
      <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
      <span class="sr-only">Next</span>
    </a>
  </div>
</div>

</body>
</html>

Answer №2

Your code has been tested successfully. The issue may be caused by another variable.

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
  <style>
  
   #myCarousel {
    margin-top: 2rem;
   }
  .carousel-inner > .item > img,
  .carousel-inner > .item > a > img {
      width: 70%;
      margin: auto;
  }
  </style>
</head>
<body>

<div class="container">

  <div id="myCarousel" class="carousel slide" data-ride="carousel">
    
    <!-- Indicators -->
    <ol class="carousel-indicators">
      <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
      <li data-target="#myCarousel" data-slide-to="1"></li>
      <li data-target="#myCarousel" data-slide-to="2"></li>
      <li data-target="#myCarousel" data-slide-to="3"></li>
    </ol>

    <!-- Wrapper for slides -->
    <div class="carousel-inner" role="listbox">

      <div class="item active">
        <img src="https://picsum.photos/460/345/?image=10" alt="Chania" width="460" height="345">
        <div class="carousel-caption">
          <h3>Chania</h3>
          <p>The atmosphere in Chania has a touch of Florence and Venice.</p>
        </div>
      </div>

      <div class="item">
        <img src="https://picsum.photos/460/345/?image=15" alt="Chania" width="460" height="345">
        <div class="carousel-caption">
          <h3>Chania</h3>
          <p>The atmosphere in Chania has a touch of Florence and Venice.</p>
        </div>
      </div>

      <div class="item">
        <img src="https://picsum.photos/460/345/?image=20" alt="Flower" width="460" height="345">
        <div class="carousel-caption">
          <h3>Flowers</h3>
          <p>Beautiful flowers in Kolymbari, Crete.</p>
        </div>
      </div>

      <div class="item">
        <img src="https://picsum.photos/460/345/?image=25" alt="Flower" width="460" height="345">
        <div class="carousel-caption">
          <h3>Flowers</h3>
          <p>Beautiful flowers in Kolymbari, Crete.</p>
        </div>
      </div>

    </div>

    <!-- Left and right controls -->
    <a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
      <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
      <span class="sr-only">Previous</span>
    </a>
    <a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">
      <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
      <span class="sr-only">Next</span>
    </a>
  </div>
</div>

</body>
</html>

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

Issue with scrollIntoView in devices with a width lower than 1200px

In my Angular 5 project, I have a table where each row is generated dynamically using *ngFor and given an id based on the username. <tbody *ngFor="let User of FullTable; let i = index"> <tr id='{{User.username}}'> <th scope="r ...

javascriptangulartwitter-bootstrapbootstrap-4js-scrollintoview

The Bootstrap table is not adhering to the specified width when the display is set

I encountered an issue starting yesterday. I am utilizing Bootstrap 4 and tables. Whenever I set a width greater than 13.5vw, the table does not adjust accordingly. You can view the fiddle here Below is the code snippet: HTML <table cl ...

htmlcsstwitter-bootstrap

``on click of the back button of the browser, automatically submit the form

I'm facing a specific issue that I need help with. I have created a form with a hidden value, and I want it to be submitted when the user clicks the browser's back button. Although I've managed to control the backspace key, I haven't be ...

javascriptphpjqueryhtmlforms

Struggling to receive a response from request.POST.get within the index function of views.py

I am struggling to develop a web application that shows the IP Address of a hostname entered by the user in a text field. Unfortunately, I keep encountering an error where I can't seem to get a response from the URL. As a beginner in this field, I wou ...

pythonhtmldjangodns

The art of placing images using CSS

I'm having trouble aligning the images into two rows of three, with the news section on the right side below the navigation bar. I've tried different methods but can't seem to get it right. Both the image and link should be clickable, but I& ...

htmlcss

"Creating a responsive design: Setting the width of a :before pseudo element based on the size of

I am looking to encircle specific words with an image circle. <p> <span class="Subjekt">Father</span> <span class="Predicate">brings</span> </p> using .Subject:before { position: absolute; background-ima ...

htmlcsswidthcss-positionpseudo-element

Ways to differentiate between buttons in a button cluster?

I have created a set of 3 buttons using the code from this resource. However, the buttons are currently positioned vertically close to each other as shown in the source code. I would like to adjust the spacing between them. Is there a way to achieve this ...

htmlcss

The implementation of @font-face is failing to display on all currently used web browsers

Hey there, I could really use some help with getting @font-face to work properly. Despite trying numerous solutions, I still seem to be missing something. If anyone can spot what I'm doing wrong, please let me know! @font-face { font-family: " ...

htmlcssfontsfont-face

Illustrate an element positioned beneath a child element within a different element

I am in the process of designing an overlay on a Google Map that resembles a real map placed on a table, using 2 pixel lines as creases above the map. This design does not significantly impact interactions with the map; only 6 out of 500 vertical lines are ...

javascripthtmlcssgoogle-maps

Tips on how to align a wrapper-div in the center without affecting the positioning of the

I am looking to keep my page perfectly centered in the browser without affecting the content (similar to how align-text: center works). Specifically, I want to center my wrapper-div. How can I achieve this? Here is a simplified version of my current page ...

htmlcsspositioning

How can the target pseudo-class be utilized to replace the 'active' state on navigation across several pages effectively?

Within a large application, I am managing a micro site and looking to implement tertiary navigation with an active state for pages. This involves inserting a single html blob into multiple pages. My goal is to use an active class to highlight the page in ...

htmlcss

What is the best way to ensure that my transitionend event is triggered?

I'm currently exploring the <progress> element and attempting to incorporate a CSS transition to achieve a smooth progress bar effect as its value increases. Despite my efforts, I can't seem to trigger JS after the transitionend event occur ...

javascripthtmljquerycsscss-transitions

Unable to assign a basic HTML class to a Blazor component

Upon attempting to implement the following code in my .NET 5 Blazor project within a .razor file: <SignedLabel class="some-css-class" Price=123 Currency=Currency.Usd /> I encountered an issue where Blazor interpreted the class attribute as ...

htmlrazorblazor

Python - Selenium: A guide to locating elements based on color

I have a situation where I need to select only the "Claim" button from the first div, even though both div cases are very similar. Is using background color a good way to identify my element? Or do you have any other ideas? 1. <div class="well well-sm ...

cssselenium

Creating a modal using JavaScript and CSS

When I click on the hello (plane geometry) as shown in the figure, a popup appears on the extreme left of the screen instead of appearing on the plane geometry box. Can someone please help me fix this issue? I have also included the code below: https://i. ...

javascripthtmlcssthree.js

What causes the circular progress bar to disappear when hovering over the MUI React table?

My goal was to create a table with a CircularProgressBar that changes its background color from orange to dark blue when hovering over the row. However, despite my efforts, I couldn't get it to work as intended. Additionally, I wanted the progressBar ...

javascripthtmlcssreactjsmaterial-ui

align items center with respect to my central element

Describing my issue might be a bit complex, but I'll give it a shot. I'm working on a website and have 3 div elements in the header for my navigation bar (burger menu / logo / social networks). I've used flex display with justify-content: be ...

htmlcss

What is the best method for adding a table header that spans across the first two columns?

Here is a link that I would like you to look at: jsfiddle.net/hTRQJ/ <table class="table table-bordered table-striped"><thead> <tr> <th colpan=""> Checkin </th> ...

htmlhtml-table

Steps to extract the data from a submitted HTML form and save it into a nested document within a Mongoose schema

Mongoose Schema for Contact Information: const addressSchema = new Schema({ street: { type: String, trim: true }, state: { type: String, trim: true , match: [/^[a-zA-Z]{2,}/, 'Please Enter State in a Correct Format']}, zip: {type: Nu ...

htmlexpressdatabase-schemamongoose-schemaembedded-documents

What is the best way to override a custom class-li element within another class-li?

I've just started learning HTML5 and CSS3, and I've encountered a challenge: Here is the code I have written so far: .custom-list ol { counter-reset: item; padding-left: 10px; } .custom-list li { display: block; } .custom-l ...

csshtml