Having trouble with the functionality of Bootstrap 5 carousel?

I've been attempting to integrate this carousel into my Bootstrap 5 webpage. I found it on Codepen - https://codepen.io/sahil-verma/pen/wxXryx

Thus far, I've copied the code into my webpage and linked the corresponding CSS within style tags, similar to the following:

<div class="container">
      <style media="screen">
      #quote-carousel {
  padding: 0 10px 30px 10px;
  margin-top: 60px;
}
#quote-carousel .carousel-control {
  background: none;
  color: #CACACA;
  font-size: 2.3em;
  text-shadow: none;
  margin-top: 30px;
}
#quote-carousel .carousel-indicators {
  position: relative;
  right: 50%;
  top: auto;
  bottom: 0px;
  margin-top: 20px;
  margin-right: -19px;
}
#quote-carousel .carousel-indicators li {
  width: 50px;
  height: 50px;
  cursor: pointer;
  border: 1px solid #ccc;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
  border-radius: 50%;
  opacity: 0.4;
  overflow: hidden;
  transition: all .4s ease-in;
  vertical-align: middle;
}
#quote-carousel .carousel-indicators .active {
  width: 128px;
  height: 128px;
  opacity: 1;
  transition: all .2s;
}
.item blockquote {
  border-left: none;
  margin: 0;
}
.item blockquote p:before {
  content: "\f10d";
  font-family: 'Fontawesome';
  float: left;
  margin-right: 10px;
}
      </style>
        <div class="row">
            <div class="col-md-12">
                <div class="carousel slide" data-ride="carousel" id="quote-carousel">
                    <!-- Carousel Slides / Quotes -->
                    <div class="carousel-inner text-center">
                        <!-- Quote 1 -->
                        <div class="item active">
                            <blockquote>
                                <div class="row">
                                    <div class="col-sm-8 col-sm-offset-2">
                                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. !</p>
                                        <small>Someone famous</small>
                                    </div>
                                </div>
                            </blockquote>
                        </div>
                        <!-- Quote 2 -->
                        <div class="item">
                            <blockquote>
                                <div class="row">
                                    <div class="col-sm-8 col-sm-offset-2">
                                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. </p>
                                        <small>Someone famous</small>
                                    </div>
                                </div>
                            </blockquote>
                        </div>
                        <!-- Quote 3 -->
                        <div class="item">
                            <blockquote>
                                <div class="row">
                                    <div class="col-sm-8 col-sm-offset-2">
                                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. .</p>
                                        <small>Someone famous</small>
                                    </div>
                                </div>
                            </blockquote>
                        </div>
                    </div>
                    <!-- Bottom Carousel Indicators -->
                    <ol class="carousel-indicators">
                        <li data-target="#quote-carousel" data-slide-to="0" class="active"><img class="img-responsive " src="https://s3.amazonaws.com/uifaces/faces/twitter/mantia/128.jpg" alt="">
                        </li>
                        <li data-target="#quote-carousel" data-slide-to="1"><img class="img-responsive" src="https://s3.amazonaws.com/uifaces/faces/twitter/adhamdannaway/128.jpg" alt="">
                        </li>
                        <li data-target="#quote-carousel" data-slide-to="2"><img class="img-responsive" src="https://s3.amazonaws.com/uifaces/faces/twitter/brad_frost/128.jpg" alt="">
                        </li>
                    </ol>

                    <!-- Carousel Buttons Next/Prev -->
                    <a data-slide="prev" href="#quote-carousel" class="left carousel-control"><i class="fa fa-chevron-left"></i></a>
                    <a data-slide="next" href="#quote-carousel" class="right carousel-control"><i class="fa fa-chevron-right"></i></a>
                </div>
            </div>
        </div>
        <a class="btn btn-primary" href="http://thecodeblock.com/create-a-quote-testimonial-slider-using-bootstrap-carousel"><i class="fa fa-arrow-left"></i> Back to Article</a>
    </div>

Unfortunately, what I'm seeing on my page can be found here

I've been struggling to identify the issue. The carousel doesn't seem to be functioning correctly. I've compared it to another carousel on the same page that works perfectly. I even tried the same code in a Bootstrap 4 environment without any carousels, but encountered the same problem.

If anyone could help me identify the problem, I'd greatly appreciate it.

htmlcsstwitter-bootstrapbootstrap-5

Answer №1

First, you need to correct the class name from .item to .carousel-item as shown below:

<div class="carousel-item">
  <blockquote>
    ...
  </blockquote>
</div>

By making this adjustment, the display issue should be resolved.

Additionally, ensure that you include the data attribute prefix (bs-) in all necessary places for compatibility with Bootstrap 5. Add bs- to attributes like data-bs-ride, data-bs-target, data-bs-slide, etc. This will ensure the carousel functions correctly.
Refer to the snippet below for a working example:

<!doctype html>
<html lang="en">

<head>
  <!-- Required meta tags -->
  <meta charset="utf-8>
  <meta name="viewport" content="width=device-width, initial-scale=1">

  <!-- Bootstrap CSS -->
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-F3w7mX95PdgyTmZZMECAngseQB83DfGTowi0iMjiWaeVhAn4FJkqJByhZMI3AhiU" crossorigin="anonymous">

  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css" integrity="sha512-1ycn6IcaQQ40/MKBW2W4Rhis/DbILU74C1vSrLJxCq57o941Ym01SwNsOMqvEBFlcgUa6xLiPY/NS5R+E6ztJQ==" crossorigin="anonymous" referrerpolicy="no-referrer"
  />

  <title>Hello, world!</title>
</head>

<body>

  <div class="container">
    <style media="screen">
     // CSS styles here
    </style>
    <div class="row">
      <div class="col-md-12">
        <div class="carousel slide" data-bs-ride="carousel" id="quote-carousel">
          <div class="carousel-inner text-center">
            <div class="carousel-item active">
              <blockquote>
                // Quote content
              </blockquote>
            </div>
            <div class="carousel-item">
              <blockquote>
                // Quote content
              </blockquote>
            </div>
            <div class="carousel-item">
              <blockquote>
                // Quote content
              </blockquote>
            </div>
          </div>
        
          <ol class="carousel-indicators">
            // Carousel indicators content
          </ol>

          <a data-bs-slide="prev" href="#quote-carousel" class="left carousel-control"><i class="fa fa-chevron-left"></i></a>
          <a data-bs-slide="next" href="#quote-carousel" class="right carousel-control"><i class="fa fa-chevron-right"></i></a>
        </div>
      </div>
    </div>
    <a class="btn btn-primary" href="http://thecodeblock.com/create-a-quote-testimonial-slider-using-bootstrap-carousel"><i class="fa fa-arrow-left"></i> Back to Article</a>
  </div>

  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-/bQdsTh/da6pkI1MST/rWKFNjaCP5gBSY4sEBT38Q/9RBh9AH40zEOg7Hlq2THRZ" crossorigin="anonymous"></script>

</body>

</html>

https://getbootstrap.com/docs/5.1/components/carousel/

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

Stepper wizard experiences a variation in CSS styling when minified

Two plunkers showcasing material design wizard selectors are causing different behavior upon stepper clicks. One uses a minified version of CSS while the other is expanded. The issue arises with the transition effects in the .step-wizard .progressbar class ...

javascriptjqueryhtmlcss

Trouble loading antd's less styles

In my NextJs project, I have the following file structure: -pages -_app.tsx -app -styles -antdstyles.less Within _app.tsx, I am attempting to import @styles/andstyles.less, which simply imports antd styles like this: @import '~antd/di ...

cssreactjsnext.jslessantd

Integrate my API with HTML using J.Query/Ajax technology

Finally, after much effort, I have successfully created a JSON java API. My API design is simple and based on Interstellar movie details: { "title": "Interstellar", "release": "2014-11-05", "vote": 8, "overview": "Interstellar chronicl ...

javascriptjqueryhtmljsonajax

How can I ensure that my navbar-right remains fixed to the right side of the screen and is always visible at the top of the page as I

When the page first loads: After scrolling down: I am attempting to create a fixed navigation bar at the top of the screen, so that it remains visible as the user scrolls down the page. However, I am facing an issue where my navbar brand is positioned to ...

htmlcssbootstrap-4navbar

Tapping on a DIV element that overlays a YouTube video on an iPad does not trigger any action

Currently, I am working on a webpage specifically designed for iPad and I have encountered an issue: I am trying to embed a YouTube video using an iframe and also need a div element to remain on top of it. To achieve this, I have added "?wmode=transparen ...

htmlcssipadyoutube

The last value label in Google Charts bar chart getting cut off

I've searched extensively for a solution to this issue regarding the haxis labels, but I have not been able to find one that addresses it... In the image provided below, you'll observe that the last percentage label on the horizontal axis is mis ...

javascripthtmlcssgoogle-visualization

validating links in Laravel

Is it feasible to validate a href element in laravel? For instance, I have various user responses in my guest book and each user has the capability to delete their posts. The deletion process is as follows: <div class="col-lg-2"> <ul class="l ...

phphtmllaravel

Code for dynamic drop down menu and pagination using PHP and HTML

I'm struggling to understand the logic behind adjusting the number of images displayed on my page. I can't seem to select the first option (5) from the dropdown menu. No matter what I choose, it always defaults to showing 10 images. This issue ...

phphtmlpagination

Having some success with AngularJs autocomplete feature

Currently working on a small search application that utilizes Elasticsearch and AngularJS. I have made progress in implementing autocomplete functionality using the AngularJS Bootstrap typeahead feature. However, I am encountering difficulties in displayin ...

javascriptangularjstwitter-bootstrap

Discover the exact location of an HTML element within an iframe

I am currently attempting to determine the position of an element that is within an iframe. I have written the following code for this purpose: // Custom function to calculate the position of an element on the page function getElementPosition(elem){ var ...

javascripthtmlposition

The link in the HTML code has been prevented from opening in a new

echo "<tr><th align='left'><a href=\"$email\">$name</a></th> I recently transformed a PHP Email App into a saving app. However, I am encountering an issue with opening links within the application. You ca ...

phphtmlcsssqlphpmyadmin

Increase scrolling speed? - Background abruptly moves after scroll

I'm facing a minor issue. I want to create a parallax background effect similar to what can be seen on nikebetterworld.com. In my initial attempt, I managed to achieve some functionality, but I believe it can be improved. As I scroll, the background p ...

javascriptjquerycss

What is the best way to extract data from two dropdown menus and send it to separate URLs?

I need assistance with extracting the selected year value from the first dropdown. I would like to append this value to the URL of the header page and also to the options in the second dropdown. This way, when I select a PHP page from the second dropdown ...

javascriptphphtmlajax

Getting php variables into html

I have coded the following PHP script: <?php $str = time().'_'.$_FILES["file1"]["name"]; $fileName = $_FILES["file1"]["name"]; $fileTmpLoc = $_FILES["file1"]["tmp_name"]; $fileType = $_FILES["file1"]["type"]; $fileSize = $_FILES["file1"][ ...

phphtmlsession-variables

The React task list updates the todo items on change, rather than on submission

As a newcomer to React, I have embarked on the classic journey of building a todo app to learn the ropes. Everything seems to be functioning smoothly except for one minor hiccup: When I input a new todo and hit "submit", it does get added to my array but d ...

javascripthtmlreactjscomponents

Using PHP to display dynamic data and add it to an HTML element

I have a unique situation where I am storing html elements, specifically <rect> svg elements, as strings in a database. In my PHP code, I retrieve and echo this data: $db = getConnection(); $statement = $db->prepare('SELECT `copy` FROM `dra ...

phpjqueryhtmlajaxsvg

Using AngularJS to create a placeholder for a <select> element within ng-repeat

I’ve been facing a challenge while trying to insert a placeholder within an html select tag utilizing ng-repeat for an AngularJS application. Here is the JS fiddle link This is how my HTML structure appears: <div ng-repeat="item in items"> <d ...

htmlangularjs

Is it possible to implement Photoshop-inspired color curves filters on an HTML tag?

I am attempting to recreate the color curves filter from Photoshop using an HTML video tag. https://i.stack.imgur.com/erB1C.png The solution closest to what I need so far is how to simulate Photoshop's RGB levels with CSS and SVG Filters, but it doe ...

htmlcsscolorscurvesvg-filters

Is it possible to combine two conditions using CSS?

Hello, I have a question about CSS. In my navigation bar, I have 3 links with different styles: #p1 { font-family: Arial, Helvetica, sans-serif; font-size: 13px; line-height: 45px; font-weight: bolder; color: #999999; text-dec ...

htmlcsscss-selectors

Angular Bootstrap: How to Resolve the Error "Function $(...).collapse() is Undefined"

I'm a beginner with Bootstrap and I'm attempting to trigger the .collapse() function using JavaScript within an Angular controller when a user clicks on a link. The goal is to close the collapsible navbar when a link is clicked, as the routing in ...

javascriptjqueryangulartwitter-bootstrapbootstrap-4