Having trouble with your Bootstrap 4 carousel?

I'm having trouble with my BS4 Carousel code. I followed this tutorial here to create it, but it's not functioning properly. The first image displays but the carousel isn't controllable and doesn't move to the next image. Does anyone know what might be causing this issue?

<div class="container">
        <div class="row">
            <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12 col-xl-12">
                <br />
                <div id="carousel-example-generic" class="carousel-slide" data-ride="carousel">
                    <ol class="carousel-indicators">
                    <li data-target="#carousel-example-generic" data-slide-to="0" class="active"> </li>
                     <li data-target="#carousel-example-generic" data-slide-to="1"> </li>
                     <li data-target="#carousel-example-generic" data-slide-to="2"> </li>
                    </ol>

                    <div class="carousel-inner" role="listbox">
                        <div class="carousel-item-active">
                            <img src="images/1.jpeg" alt="First-Slide">
                        </div>
                        <div class="carousel-item">
                            <img src="images/2.jpeg" alt="Second-Slide">
                        </div>
                        <div class="carousel-item">
                            <img src="images/3.jpeg" alt="Third-Slide">
                        </div>
                    </div>
                    <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev"> 
                    <span class="icon-prev" aria-hidden="true"></span>
                    <span class="sr-only"> Previous </span>
                    </a>
                    <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next"> 
                    <span class="icon-next" aria-hidden="true"></span>
                    <span class="sr-only"> Next </span>
                    </a>
                </div>
            </div>
        </div>
    </div>
htmlcsscarouselbootstrap-4bootstrap-carousel

Answer №1

Perfection achieved 

<!DOCTYPE html>
<html lang="en>
<head>
  <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>
</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>
      </ol>

      <!-- Wrapper for slides>
        <div class="carousel-inner>
          <div class="item active>
            <img src="https://www.w3schools.com/bootstrap/ny.jpg" alt="Los Angeles" style="width:100%;">
          </div>

          <div class="item>
            <img src="https://www.w3schools.com/bootstrap/chicago.jpg" alt="Chicago" style="width:100%;">
          </div>
        
          <div class="item>
            <img src="https://www.w3schools.com/bootstrap/newyork.jpg" alt="New york" style="width:100%;">
          </div>
        </div>

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

</body>
</html>

Answer №2

There is a small error in your code. The class attribute should be class="carousel-item active" instead of class="carousel-item-active". The mistake is that you combined the active class with the carousel-item class, which is not correct.

<div class="carousel-item-active">
  <img src="images/1.jpeg" alt="First-Slide">
</div>

The correct code should be

<div class="carousel-item active">
  <img src="images/1.jpeg" alt="First-Slide">
</div>

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

Image stays the same in Ajax despite different dropdown choices

HTML <div class="new-product"> <div class="col-md-5 zoom-grid"> <div class="flexslider"> <ul class="slides"> <li data-thumb="images/<?php echo $productimg1?>"> ...

jqueryhtmlajax

Error: Jasmine cannot access a property of undefined value

Just getting started with js and jasmine Attempting to create a jasmine test case for my method. Encountering an error: TypeError: Cannot read property '0' of undefined. Tried different ways of passing arrays into my method sports but still facin ...

javascriptjqueryhtmlangularjsjasmine

Navigate to the subsequent field in an HTML5 form without any manual intervention

I have created the following HTML5 form: <form> <input type="text" name="orderno" /> <input name="picture" id="img" type="file" accept="image/*" capture="camera" /> <input class="btn-success" type="submit" name="submit" value="Uplo ...

javascriptphphtmlforms

Increased/Decreased impact

Can someone explain how the "Tell me more" effect is achieved on the website linked below? I'm familiar with the read more/less effect in jQuery, but what intrigues me is that the page cannot be scrolled unless the button is clicked. Here is the link ...

javascriptjqueryhtmlcss

Replace CSS property with a new CSS property

How can I remove a property from a class when using a library? For example, if the library has the following CSS: div { width: 100%; } And in your custom CSS file you want to remove the width property: div { width: none; //is this the correct w ...

htmlcsspropertiesoverriding

What is the best way to differentiate between words enclosed in quotation marks using colors?

Working on my shop, I've added a section for "Colors available", but now I want to color different words with different colors using Javascript, CSS, or HTML. <button onclick="getColors()">Colors Available</button> <script> ...

javascripthtmlcss

What are the steps to incorporate an iframe containing uniquely designed XML content?

I'm currently working on a website project for a client who specifically wants to include news from the BBC. Despite spending 3 hours searching online, I haven't been able to successfully insert an XML file into an iframe and style it to the clie ...

javascriptjquerycssxmliframe

There is no path available for [GET] request at "/users/sign_out" in the Rails 5/Bootstrap 4 application

Recently, I upgraded my existing Rails 5 app to use Bootstrap version 4 alongside Devise. Everything was working fine until I updated Bootstrap. Now, when users try to sign out, they encounter the error message: "No route matches [GET] "/users/sign_out". ...

ruby-on-railsdevisebootstrap-4

Converting Variable Values to Element IDs in JavaScript: A Helpful Guide

Is it possible to declare a value in variable A and then access that value as an id in variable B using the method getElementById()? var A = 10; var B = document.getElementById(A); console.log(B); ...

javascripthtmlgetelementbyid

Attempting to implement a disappearing effect upon submission with the use of JavaScript

I am currently working on implementing a disappearing form feature for a small web application. The idea is that once the initial form is submitted, it will be replaced by a new form. While my current code somewhat works, it only lasts for a brief moment b ...

javascripthtml

Having trouble with the functionality of JQuery drop feature?

As I delve into implementing drag and drop functionality with JQuery, I encounter a peculiar issue. I have set up 3 'draggable' divs and corresponding 3 'droppable' divs. The intended behavior is for each draggable element to be accepte ...

javascriptjqueryhtmlcssjquery-ui

Show small information box when hovering over custom toggle button

I have developed a unique custom toggle switch feature When I hover my mouse over the switch, it should display a tooltip message as YES if the switch is in the ON position and NO if it's in the OFF position. Is there a way to implement this functio ...

htmljquerycss

Achieving equal height for two divs and centering them

Is it possible to align the height of two floated divs so that the second div slips down, and the container width automatically adjusts to fit the child width while centering the divs? I apologize for any language errors. :( <!DOCTYPE html PUBLIC "-//W ...

htmlcsscss-float

Stop the Bootstrap navbar from breaking into separate lines when resizing the screen by ensuring it collapses into an icon

I have a straightforward Bootstrap Navbar that contains just a few items. When the width is less than 768, it displays in two rows. How can I make both items display in a single row at all widths without using the collapse feature? <nav class="na ...

csstwitter-bootstraptwitter-bootstrap-3

An Overview of Node.js Application Structure

Guten Tag! My name is Alex, and I am from Germany. I apologize for any mistakes in my English as it is not my first language. I have recently started learning programming with Node.js after creating some simple static HTML and CSS websites. As a beginner, ...

htmlnode.jstwitter-bootstrapexpress

Tips for displaying an absolute div component on top of a table with a scroll bar visible

I am trying to work with an HTML table that has a scroll feature. When a cell is clicked, a custom component opens. However, I am having trouble getting the custom component to scroll as well. Take a look at my jsfiddle here:: https://jsfiddle.net/rujz69n ...

htmlcss

Obtain the URL found within the href tags

Is there a way to extract the links from the href tags? When I coded it, the entire 'a' tag is showing up... Here's the code: page = urllib2.urlopen('https://www.meetup.com/') soup = BeautifulSoup(page, 'lxml') categor ...

htmlpython-2.7beautifulsoup

decrease the transparency of the main content on the page while keeping the image within

Is there a way to decrease the opacity of the background color for the body of the document while keeping the background color of the element with the id scene at full opacity? Currently, the opacity for the entire document is set to 0.5. $(".artist"). ...

jquerycssopacity

What's the best way to undo a CSS transition animation when deleting an active class?

I'm currenty working on a straightforward icon animation within a VueJS application. I've implemented a Vue transition to create a fade effect on the background elements, but I'm exploring options for a subtle upward shift animation specific ...

cssvue.jssasscss-animationsvue-transitions

Image renders only on a single page in Express.js

I am facing an issue while attempting to display an image on multiple pages using Pug and Express. The image should be visible on the routes '/', 'data', and 'update'. While it is successfully displayed on the root '/&ap ...

javascripthtmlimageexpresspug