Tips for creating a Carousel with more than three images using Bootstrap

Recently, I attempted to enhance my Carousel in Bootstrap by adding more images. Initially, I inserted the code snippet below within the ordered list with the class "carousel-indicators."

      <li data-target="#carouselExampleCaptions" data-slide-to="3"></li>

I then added a new slide (shown below) inside the div with the class "carousel-inner," alongside the original three slides.

     <div class="carousel-inner mx-auto">
        <div class="carousel-item">
          <img src="pic.jpg" class="d-block w-100" alt="pic">
          <div class="carousel-caption d-none d-md-block">
          </div>
       </div>
    </div>

However, upon testing the website and navigating through the carousel, once I reached the last image, the carousel broke. I was unable to go back to previous pictures or advance further.

In an attempt to troubleshoot, I referenced a related question titled "Bootstrap 4 Multi Carousel show 4 images instead of 3." Unfortunately, implementing that code completely disrupted the carousel. Three out of the four images were displayed on-screen vertically, with one containing the carousel controls. Any attempt to interact with the controls resulted in the entire carousel disappearing.

javascriptcssbootstrap-4carousel

Answer №1

Here is a Slider featuring 5 beautiful images that you might find helpful.

<!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/4.4.1/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
  <style>
    /* Ensure full responsiveness of the images in the slideshow */
    
    .carousel-inner img {
      width: 100%;
      height: 100%;
    }
  </style>
</head>

<body>

  <div id="demo" class="carousel slide" data-ride="carousel">
    <ul class="carousel-indicators">
      <li data-target="#demo" data-slide-to="0" class="active"></li>
      <li data-target="#demo" data-slide-to="1"></li>
      <li data-target="#demo" data-slide-to="2"></li>
            <li data-target="#demo" data-slide-to="3"></li>
                  <li data-target="#demo" data-slide-to="4"></li>

    </ul>
    <div class="carousel-inner">
      <div class="carousel-item active">
        <img src="https://images.unsplash.com/photo-1580238047299-558e582427bf?crop=entropy&cs=tinysrgb&fit=crop&fm=jpg&h=420&ixid=eyJhcHBfaWQiOjF9&ixlib=rb-1.2.1&q=80&w=680" alt="slide one" width="1100" height="500">
        <div class="carousel-caption">
          <h3>Slide One</h3>
          <p>Description slide one</p>
        </div>
      </div>
      <div class="carousel-item">
        <img src="https://images.unsplash.com/photo-1572130456602-fed3019a174e?crop=entropy&cs=tinysrgb&fit=crop&fm=jpg&h=420&ixid=eyJhcHBfaWQiOjF9&ixlib=rb-1.2.1&q=80&w=680" alt="slide two" width="1100" height="500">
        <div class="carousel-caption">
          <h3>Slide Two</h3>
          <p>Description slide two</p>
        </div>
      </div>
      <div class="carousel-item">
        <img src="https://images.unsplash.com/photo-1550828553-bb30dc55dc25?crop=entropy&cs=tinysrgb&fit=crop&fm=jpg&h=420&ixid=eyJhcHBfaWQiOjF9&ixlib=rb-1.2.1&q=80&w=680" alt="slide three" width="1100" height="500">
        <div class="carousel-caption">
          <h3>Slide Three</h3>
          <p>Description slide three</p>
        </div>
      </div>
            <div class="carousel-item">
        <img src="https://images.unsplash.com/photo-1504406438164-c0e042535100?crop=entropy&cs=tinysrgb&fit=crop&fm=jpg&h=420&ixid=eyJhcHBfaWQiOjF9&ixlib=rb-1.2.1&q=80&w=680" alt="slide four" width="1100" height="500">
        <div class="carousel-caption">
          <h3>Slide Four</h3>
          <p>Description slide Four</p>
        </div>
      </div>
                  <div class="carousel-item">
        <img src="https://images.unsplash.com/photo-1571407509209-73d3e4a45892?crop=entropy&cs=tinysrgb&fit=crop&fm=jpg&h=420&ixid=eyJhcHBfaWQiOjF9&ixlib=rb-1.2.1&q=80&w=680" alt="slide five" width="1100" height="500">
        <div class="carousel-caption">
          <h3>Slide Five</h3>
          <p>Description slide Five</p>
        </div>
      </div>
    </div>
    <a class="carousel-control-prev" href="#demo" data-slide="prev">
      <span class="carousel-control-prev-icon"></span>
    </a>
    <a class="carousel-control-next" href="#demo" data-slide="next">
      <span class="carousel-control-next-icon"></span>
    </a>
  </div>

</body>

</html>

Answer №2

Below is an example showcasing a class from Bootstrap.

<div id="carouselExampleSlidesOnly" class="carousel slide" data-ride="carousel">
  <div class="carousel-inner">
    <div class="carousel-item active">
      <img class="d-block w-100" src="..." alt="First slide">
    </div>
    <div class="carousel-item">
      <img class="d-block w-100" src="..." alt="Second slide">
    </div>
    <div class="carousel-item">
      <img class="d-block w-100" src="..." alt="Third slide">
    </div>
  </div>
</div>

Answer №3

A snippet of code has been provided below that showcases a carousel containing 5 distinct images.

<div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel">
        <ol class="carousel-indicators">
          <li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>
          <li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
          <li data-target="#carouselExampleIndicators" data-slide-to="2"></li>
          <li data-target="#carouselExampleIndicators" data-slide-to="3"></li>
          <li data-target="#carouselExampleIndicators" data-slide-to="4"></li>
        </ol>
        <div class="carousel-inner">
          <div class="carousel-item active">
            <img class="d-block w-100" src="1.jpg" alt="First slide">
                <div class="carousel-caption d-none d-md-block">
                    <h5>...</h5>
                    <p>...</p>
                </div>
          </div>
          <div class="carousel-item">
            <img class="d-block w-100" src="2.jpg" alt="Second slide">
            <div class="carousel-caption d-none d-md-block">
                <h5>...</h5>
                <p>...</p>
            </div>
          </div>
          <div class="carousel-item">
            <img class="d-block w-100" src="3.jpg" alt="Third slide">
            <div class="carousel-caption d-none d-md-block">
                <h5>...</h5>
                <p>...</p>
            </div>
          </div>
          <div class="carousel-item">
            <img class="d-block w-100" src="4.jpg" alt="Fourth slide">
            <div class="carousel-caption d-none d-md-block">
                <h5>...</h5>
                <p>...</p>
            </div>
          </div>
          <div class="carousel-item">
            <img class="d-block w-100" src="5.jpg" alt="Fifth slide">
            <div class="carousel-caption d-none d-md-block">
                <h5>...</h5>
                <p>...</p>
            </div>
          </div>
        </div>
        <a class="carousel-control-prev" href="#carouselExampleIndicators" 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="#carouselExampleIndicators" role="button" data-slide="next">
          <span class="carousel-control-next-icon" aria-hidden="true"></span>
          <span class="sr-only">Next</span>
        </a>
      </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

Generating a new array and merging different sets of keys together

Is there a way to modify how items are added to a jQuery array? Here is the current code snippet in use: var sub_updated = []; $('.current-sub-items').each(function() { $(this).find('.prod-select').each(function() { if ($(th ...

javascriptjquery

When a user clicks a button, Javascript will generate a fresh upload image form

I am interested in creating a button that, when clicked, generates a new image upload button within a form I have already created in HTML. My goal is to figure out the best approach for this functionality, especially considering that there is a remove butt ...

javascriptjqueryhtml

Exploring keys rather than values in Vue application

Currently, I am facing an issue where I am retrieving the values for three keys from my API using Axios. However, each time I make a request, the values are being displayed four times for each key. After removing one key from my data models and retesting, ...

javascriptvue.jsaxiosnuxt.js

Form an array using the values that are returned

As I iterate through an object and extract elements, my console.log displays: ["item 1"] ["item 2"] ["item 3"] and so on. All I want is to create a new array formatted like this: ["item 1","item 2","item 3"]; ...

javascript

Is there a way to make the fixed table header scroll along with the table body data?

I am facing an issue with my table where I have multiple columns. I have managed to fix the table header successfully, however, when I scroll horizontally through the table body columns, the header remains fixed and does not move accordingly. How can I res ...

javascriptjquerycsshtml

Having trouble getting an Angular directive to bind a click event to an external element?

I've been working on creating a unique custom event for toggling with Angular. The directive I'm using is called toggleable. It may sound simple at first, but the tricky part is that I want to be able to use any button or link on the page for to ...

javascripthtmlangularjsangularjs-directiveangularjs-scope

"Enhance Your Sublime 3 Experience with a Jade Syntax Highlighter, Linting, Auto Complete, and

After trying out the recommended packages for Sublime Text, I'm still not satisfied with how they handle syntax highlighting, code linting, and auto suggestion. Could anyone recommend a comprehensive package specifically for Jade? ...

javascriptnode.jsexpresspugmean-stack

Validation method in jQuery for a set of checkboxes with distinct identifiers

I am faced with a situation where I have a set of checkboxes that, due to the integration with another platform, must have individual names even though they are all interconnected. <div class="form-group col-xs-6 checkbox-group"> <label cla ...

javascriptjqueryjquery-validate

Adding jQuery and other libraries to Typescript for optimal functionality

After spending days researching and struggling, I am reaching out here for clarification on the process of importing a library in Typescript. I used to just add the script tag and everything would work fine. Now that I am working on building a MEAN-Stack ...

javascriptjquerytypescripttypesmean-stack

Utilize CSS Animation to bring overlapped images to life

Trying to replicate the animation featured on the CISO website header. I have created a JSFiddle demo showcasing my attempt, but it seems like something is not quite right. img { transition: all .3s ease; overflow: hidden ...

htmlcsscss-animations

Three brothers and sisters - One must expand responsively while the remaining two maintain minimum content sizes

Attempting to outline the limitations at hand. We have 3 containers named .content, .left, and .bottom, along with a resize handler that governs the available space. I aim for the .container to expand as the space increases, utilizing all available area. ...

css

Perform batch updates on multiple documents using MongoDB

How can I efficiently update multiple documents in MongoDB by iterating through an array of objects and then returning the modified documents in the response? Be sure to refer to the code comments for guidance .put(function (req, res) { var data = r ...

javascriptnode.jsmongodbexpresses6-promise

Having trouble accessing the data I'm setting in a separate component using the Context API

Currently working on my own project and I've encountered a problem while using the Context API. It's my first time using it. The issue I'm facing is that I can't seem to console.log the data I'm setting. I'm trying to create ...

javascriptreactjs

Generating a string indicating the range of days chosen

Imagine a scenario where there is a selection of days available to the user (they can choose multiple). The list includes Sunday, Monday, Tuesday, Wednesday, Thursday, Friday, and Saturday, each with an associated number from 0 to 6. For instance, Sunday ...

javascriptangularjsstringfor-loopweekday

Issue: [Issue: ENOENT: the file or directory './1695556319341.mp3' does not exist]

I am currently facing an issue while trying to convert an mp4 file to an mp3 file and then uploading it directly to Firebase storage without saving it locally on my machine. The error I encounter is "Error: [Error: ENOENT: no such file or directory, open ...

javascriptnode.jsfirebaseexpressffmpeg

Surprise mistake: Jade's error with the length

What can I do to address this problem? The jade file in question is as follows: extends layout block content h1. User List ul each user, i in userlist li a(href="mailto:#{user.email}")= user.username U ...

javascriptnode.jsexpresspug

How can we ensure that pointer events return the same coordinates as touch events when the viewport is zoomed in?

I attempted to utilize pointer events (such as pointerdown) instead of using a combination of touch events (e.g. touchstart) and mouse events (e.g. mousedown) to determine the input event coordinates. var bodyElement = document.body; bodyElement.addEvent ...

javascripthtmlgoogle-chromemobilepointer-events

Tips on utilizing the useState hook for storing numerous key objects?

Currently, I am working with a candlestick chart for a cryptocurrency that displays data over different timeframes such as 1 minute and 30 minutes. Below is the code snippet that sets the initial state to show a 1-hour chart when a user first visits: const ...

javascriptreactjsnext.js

Is it feasible to pre-load external websites using JavaScript?

While searching on various platforms, including Stack Overflow, I couldn't find a solution to this specific query. I'm not necessarily seeking an implementation already in place, but rather ... Imagine having an intranet application that loads q ...

javascriptperformancepreloadprefetch

What is the best way to transfer Express.js variables to MongoDB operations?

I have been developing a blogging application using Express, EJS, and MongoDB. Feel free to check out the GitHub repository for more details. One of the features I've implemented is a simple pager for the posts within the application. Within the pos ...

javascriptnode.jsexpressejsmean-stack