The Bootstrap Carousel is limited to a maximum of three items and cannot accommodate additional items

I have incorporated the Bootstrap 5 carousel with a total of 9 items

The first item is a YouTube video, while the other 7 items are empty Divs with background-images

The issue arises where only the first three items seem to be working, and only three indicators are displayed

Furthermore, attempting to display the fourth item causes the carousel to stop functioning

<section class="slider">
    <div id="carouselExampleIndicators" class="carousel h-100" data-bs-ride="carousel">
        <div class="carousel-indicators">
          
            // Carousel indicators code omitted for brevity
            
        </div>
        <div class="carousel-inner h-100">
          
            // Carousel items code omitted for brevity
          
        </div>
        <button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleIndicators"
            data-bs-slide="prev">
            <span class="carousel-control-prev-icon" aria-hidden="true"></span>
            <span class="visually-hidden">Previous</span>
        </button>
        <button class="carousel-control-next" type="button" data-bs-target="#carouselExampleIndicators"
            data-bs-slide="next">
            <span class="carousel-control-next-icon" aria-hidden="true"></span>
            <span class="visually-hidden">Next</span>
        </button>
    </div>
</section>
csstwitter-bootstrapbootstrap-4

Answer №1

Consider this: you only have 3 buttons at your disposal, so there might be something to that. Perhaps try incorporating more buttons into the mix.

<section class="slider">
    <div id="carouselExampleIndicators" class="carousel h-100" data-bs-ride="carousel">
        <div class="carousel-indicators">
            <button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="0"
                class="active" aria-current="true" aria-label="Slide 1"></button>
            <button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="1"
                aria-label="Slide 2"></button>
            <button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="2"
                aria-label="Slide 3"></button>
                <button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="4"
                aria-label="Slide 4"></button>
                <button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="5"
                aria-label="Slide 5"></button>
                <button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="6"
                aria-label="Slide 6"></button>
        </div>
        // And more buttons
        <div class="carousel-inner h-100">
            <div class="carousel-item h-100 active">
                <iframe class="w-100 h-100" src="https://www.youtube.com/embed/Z6nvbmqYR9g"
                    title="YouTube video player" frameborder="0"
                    allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
                    allowfullscreen></iframe>
            </div>
            <div class="carousel-item carousel-item-one h-100">

            </div>
            <div class="carousel-item carousel-item-two h-100">

            </div>
            <div class="carousel-item carousel-item-three h-100">

            </div>
            <div class="carousel-item carousel-item-four h-100">

            </div>
            <div class="carousel-item carousel-item-five h-100">

            </div>
            <div class="carousel-item carousel-item-six h-100">

            </div>
            <div class="carousel-item carousel-item-seven h-100">

            </div>
            <div class="carousel-item carousel-item-eight h-100">

            </div>
        </div>
        <button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleIndicators"
            data-bs-slide="prev">
            <span class="carousel-control-prev-icon" aria-hidden="true"></span>
            <span class="visually-hidden">Previous</span>
        </button>
        <button class="carousel-control-next" type="button" data-bs-target="#carouselExampleIndicators"
            data-bs-slide="next">
            <span class="carousel-control-next-icon" aria-hidden="true"></span>
            <span class="visually-hidden">Next</span>
        </button>
    </div>
</section>

Answer №2

You currently have only three carousel indicators. You have the option to either remove some indicators or add 4 more divs to balance it out.

Check out this functional fiddle where I made some adjustments to your code.

<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.1.3/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.1.3/js/bootstrap.min.js"></script>
<section class="slider">
    <div id="carouselExampleIndicators" class="carousel h-100" data-bs-ride="carousel">
       
        <div class="carousel-inner h-100">
            <div class="carousel-item h-100 active">
                <iframe class="w-100 h-100" src="https://www.youtube.com/embed/Z6nvbmqYR9g"
                    title="YouTube video player" frameborder="0"
                    allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
                    allowfullscreen></iframe>
            </div>
            <div class="carousel-item carousel-item-one h-100"><img src="https://via.placeholder.com/150">

            </div>
            <div class="carousel-item carousel-item-two h-100"><img src="https://via.placeholder.com/250">

            </div>
            <div class="carousel-item carousel-item-three h-100"><img src="https://via.placeholder.com/350">

            </div>
            <div class="carousel-item carousel-item-four h-100"><img src="https://via.placeholder.com/450">

            </div>
            <div class="carousel-item carousel-item-five h-100"><img src="https://via.placeholder.com/550">

            </div>
            <div class="carousel-item carousel-item-six h-100"><img src="https://via.placeholder.com/650">

            </div>
            <div class="carousel-item carousel-item-seven h-100"><img src="https://via.placeholder.com/750">

            </div>
            <div class="carousel-item carousel-item-eight h-100"><img src="https://via.placeholder.com/850">

            </div>
        </div>
        <button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleIndicators"
            data-bs-slide="prev">
            <span class="carousel-control-prev-icon" aria-hidden="true"></span>
            <span class="visually-hidden">Previous</span>
        </button>
        <button class="carousel-control-next" type="button" data-bs-target="#carouselExampleIndicators"
            data-bs-slide="next">
            <span class="carousel-control-next-icon" aria-hidden="true"></span>
            <span class="visually-hidden">Next</span>
        </button>
    </div>
</section>

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

Stop my ::after element from interfering with my select dropdown menu

Check out this JSFiddle I created to showcase my issue: JSFiddle I am currently working on a customized dropdown menu using an icomoon icon instead of a V. While the design looks great, the ::after pseudo-element for the parent container is causing issues ...

htmlcssdrop-down-menu

When attempting to incorporate Jasmine into my current AngularJS/Bootstrap project, I encountered the error message stating

Currently, I am working on a group project that requires test coverage. The project utilizes npm and angularJS. To kick things off, I performed an npm install for jquery, jasmine, and angular-mocks. Since I'm relatively new to testing, I decided to st ...

javascriptangularjsnode.jstwitter-bootstrapjasmine

Is there a way to command Chrome or Firefox to execute JavaScript or load a Bookmarklet directly from the command line?

Is there a way to execute javascript in the current browser window through the command line, either in Chrome or Firefox? Or is it possible to load a bookmarklet that includes javascript? I'm interested in creating a program that can monitor changes ...

cssfirefoxgoogle-chrome

Tips for inserting manual line breaks in justified text

My task involves taking a 5-page story from a Word document and implementing it on a website. #reading { hyphens: auto; text-align: justify } <div style="font-size: 20px; width: 750px; margin-bottom: 4em;" class="reading" id="reading"> TextT ...

htmlcss

Maintain the flow of a floated or absolutely positioned element using CSS

Is there a way in CSS to ensure that floated or absolutely positioned elements remain within the flow? I find it frustrating that CSS lacks something like flow:on and flow:off to control this. The main issue I am facing is with having a div element of var ...

csscss-floatabsolute

What is the best way to include a drop-right menu within a dropdown menu?

Hey there! I'm working on a page that features a dropdown navbar. My goal is to create a secondary dropdown that appears to the right when hovering over an li element within the initial dropdown. Any tips on how to accomplish this? Thanks in advance! ...

htmlcssnavbardropdownsubmenu

An issue occurred during the compilation of an Angular6 project

I am embarking on my first Angular project and may not grasp every detail perfectly. In my search for guidance, I came across the command "ng build --prod" on Google and decided to give it a try. Everything seemed to be going smoothly at first until an err ...

htmlcssangularwebng-build

Customize the text color across all sections of the application in ExtJS 6

I am looking to update the text color across my entire application. Currently, it's gray and I would like to change it to black. The platform I am working with is classic. I came across this code snippet in CSS: .x-body { margin: 0; -webkit-f ...

cssextjssassextjs6extjs6-classic

Modifying CSS using jQuery in a PHP While Loop

I've been racking my brain trying to solve this issue, experimenting with different approaches but so far, no luck. Question: How can I dynamically change the color of a specific div within a PHP while loop using jQuery after receiving an AJAX respon ...

javascriptphpjqueryhtmlcss

What is the method to create a resizable table column border rather than resizing the bottom corner border?

At the moment, we are able to resize the table border when we drag the corner. However, my goal is to enable resizing on the right side of the full border. https://i.sstatic.net/yFI24.png Below is the CSS code for resizing: th{ resize: horizontal; ove ...

javascripthtmlcsshtml-tableangular13

The outer DIV will envelop and grow taller in conjunction with the inner DIV

Could use a little help here. Thank you :) I'm having trouble figuring out how to get the outer div to wrap around the inner div and expand upwards with the content inside the inner editable div. The inner div should expand from bottom to top, and t ...

javascripthtmlcss

Achieve a full vertical span of the Bootstrap 5 grid row to encompass all of its content

How can I ensure that a Bootstrap 5 grid row expands to fit its entire content vertically? Adding a label element causes the content of the first row to overlap with the second row in the example provided below. <!doctype html> <html lang="en ...

csstwitter-bootstrapbootstrap-5

Creating page borders in print CSS for each individual page is a helpful way to enhance the visual appeal

I am facing an issue where I have a lengthy HTML document that is ready for printing, but I need to add borders to every page. I tried adding body { border:2px #666 solid; padding:5px; } in the CSS code, which looked good in the HTML view, but not in the p ...

htmlcssprint-css

Troubleshooting Bootstrap: Issues persist even after including CDN links and reference style link // Python

Currently, I'm in the process of constructing my Django app. After successfully implementing the login page and homepage, I decided to give my page a much-needed facelift since it looked extremely basic. A big fan of Bootstrap, I've used it exten ...

pythonhtmldjangotwitter-bootstrapcloud9

revealing a particular field in jQuery during the validation process

Edit: Currently, I am utilizing the jquery validate plugin and have hidden all error messages initially. Upon checking a specific input field, my objective is to unhide the error message if it is invalid without causing error messages to appear in other f ...

javascriptjqueryhtmlcss

Alter the typography of the text that has been enhanced by Google

I am attempting to modify the default font of certain text that is processed through google-code-prettify within an angular directive. The structure of the template served by my directive appears as follows: <pre class= "prettyprint" style= "border:1p ...

cssangularjstemplatesfontssyntax-highlighting

What is causing the floated element to overlap the element below instead of vice versa?

div { background-color: #00FFFF; } p { width: 50px; height: 50px; border: 1px solid black; margin: 0px; } #p1 { background-color: red; float: left; } #p2 { background-color: green; } #p3 { background-color: orange; } #p4 { backgr ...

htmlcsscss-float

What is the best way to align a set of input fields with their corresponding labels, along with a single button?

https://i.sstatic.net/xSwSH.png I am facing a specific alignment challenge in my project, especially due to the presence of labels. When I group inputs and a button together and use align items center, it works perfectly. However, the labels affect the he ...

cssbootstrap-5

Mastering the art of utilizing icons in HTML/CSS within Bootstrap

We are in the process of creating a web application using Bootstrap Studio for the frontend. One issue we are facing is that when the window is resized, the icons start overlapping each other. Is there a way to make one icon go under the other? https://i. ...

htmlcsstwitter-bootstrapbootstrap-studio

Is there a way to show the text within a div tag in a tooltip without relying on jQuery?

Is there a way to display the text content of an HTML element inside a tooltip? I am struggling to achieve this, as I would like to have the word test appear in the tooltip, but it's not working. Unfortunately, we are not using jQuery in our code bas ...

javascripthtmlcsstooltip