Transitioning between carousel slides will reveal a clean white backdrop

I'm currently facing an issue with my html website. It seems that when I navigate through the carousel slides on my Bootstrap-5 based site, white spaces keep popping up. How can I resolve this issue?

Here is a snippet of my code:

HTML

<!doctype html>
<html lang="kr">
  <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.0.0-beta2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous">
    <link rel="stylesheet" href="./style.css">
    <title>P&P</title>
  </head>
  <body>

    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta2/dist/js/bootstrap.bundle.min.js" integrity="sha384-gtEjrD/SeCtmISkJkNUaaKMoLD0//ElJ19smozuHV6z3Iehds+3Ulb9Bn9Plx0x4" crossorigin="anonymous"></script>
    <script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.3/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
  </body>

  <nav class="navbar navbar-expand-lg">
    <div class="container">
      <a class="navbar-brand" href="#">P & P</a>
      <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarScroll" aria-controls="navbarScroll" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
      </button>
      
      <!-- Other Navbar Items -->
      
    </div>
  </nav>


 
  <div id="carouselExampleCaptions" class="carousel slide" data-ride="carousel">
    <ol class="carousel-indicators">
      <li data-target="#carouselExampleCaptions" data-slide-to="0" class="active"></li>
      <li data-target="#carouselExampleCaptions" data-slide-to="1"></li>
      <li data-target="#carouselExampleCaptions" data-slide-to="2"></li>
    </ol>
    
    <!-- Carousel Inner Content Here -->
    
  </div>
  
  <section class="babies">
      <div class="container py-5">
          <div class="row py-5">
              <class class="col-lg-5">
                  <h1></h1>
              </class>
          </div>
      </div>
  </section>

</html>

CSS

*{
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}

<!-- Additional Styling Code -->

I've tried troubleshooting but couldn't pinpoint the exact problem in my code. The carousel implementation is directly from the official Bootstrap example.

htmljquerycssbootstrap-5

Answer №1

I'm not sure why this issue is occurring, but you may want to give this a try as it seems to work with your current code.

 <div id="carouselExampleControls" class="carousel slide" data-bs-ride="carousel">
  <div class="carousel-inner">
    <div class="carousel-item active">
      <img src="a.lpg" class="d-block w-100" alt="...">
      <div class="carousel-caption d-none d-md-block">
          <h5>Some script<br>Some script</h5>
          <h6><br>Some script</h6>

        </div>
    </div>
    <div class="carousel-item">
      <img src="b.jpg" class="d-block w-100" alt="...">
      <div class="carousel-caption d-none d-md-block">
          <h5>Some script<br>Some script</h5>
          <h6><br>Some script</h6>

        </div>
    </div>
    <div class="carousel-item">
      <img src="c.jpg" class="d-block w-100" alt="...">
      <div class="carousel-caption d-none d-md-block">
          <h5>Some script<br>Some script</h5>
          <h6><br>Some script</h6>

        </div>
    </div>
  </div>
  <button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleControls" 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="#carouselExampleControls" data-bs-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="visually-hidden">Next</span>
  </button>
</div>

You actually don't need to include this code in your CSS because it is already built into Bootstrap by default.

.carousel-control-next-icon:after{
   content: '>';
   font-size: 55px;
   color: black;
 }

.carousel-control-prev-icon:after {
   content: '<';
   font-size: 55px;
   color: black;
 }

Answer №2

Hey there! When you incorporate a carousel slider, it automatically adds white arrows for sliding left and right as part of the default carousel CSS. Additionally, in your own CSS, you've also included code to display the arrows as follows:

.carousel-control-next-icon:after{
   content: '>';
   font-size: 55px;
   color: black;
 }

.carousel-control-prev-icon:after {
   content: '<';
   font-size: 55px;
   color: black;
}

You can either comment out this code to remove the black arrows or utilize carousel JavaScript methods to achieve the same result.

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

Creating a form in HTML to retrieve two variables from a PHP page using the GET method

After spending several hours working on this issue, I am still struggling to get it functioning correctly. The page where my form is located can be found at /index.php?action=pagename. My goal is to retrieve a variable from the URL /index.php?action=pagena ...

phphtmlformsget

Conflict between multiple jQuery files

Currently, I am in the process of creating a test website for an upcoming project. However, I have encountered some issues with jQuery. This is a static HTML5 website that includes a social widget. The problem arises when I remove a particular jQuery lin ...

javascriptjqueryhtml

displaying HTML on the web page only, without appearing in the text input field

update1: I have updated the image to provide better clarity https://i.sstatic.net/hYLsI.png I am currently working on implementing chip filters similar to Google Flights. When selecting "sports," it currently displays "sports1" and replaces "sports" with ...

javascripthtmlreactjsreduxmaterial-ui

"Encountering an issue with the live preview feature in Br

Currently, I am working on a project offline and trying to make Brackets' live preview feature work smoothly. It has proven to be quite convenient for my tasks. While opening my project files using the "open file" option in Brackets, I encountered an ...

htmlcssadobe-brackets

D3.js: Unveiling the Extraordinary Tales

I'm currently working on a project that requires me to develop a unique legend featuring two text values. While I have successfully created a legend and other components, I am facing difficulties in achieving the desired design. Specifically, the cur ...

javascripthtmld3.js

Identifying and locating white-colored text within an HTML document

My HTML file has the following structure: <HTML> <HEAD> <style> .secret { background-color: black; color: black; } </style> </HEAD> <BODY ...

pythonhtml

The Javascript function is missing in some environments with poor internet speed

My MVC application has a specific scenario that I am encountering: There is a page (cshtml) with a grid. Each row in the grid has a button that should open a popup (which is a partial view). This partial view contains a Kendo grid, and to apply common beh ...

jquery.netajaxasp.net-mvcbundle

I experienced issues with the brackets software freezing up while using the Bootstrap min CSS file

Recently, I've been using brackets as my text editor and have run into an issue with the bootstrap.min CSS file. For some reason, it keeps freezing whenever I try to load it in brackets. Oddly enough, HTML files work perfectly fine, but ...

cssadobe-brackets

Quick method to assign child iframe title as index.html <title>title</title>

Is there a simple method to dynamically update the <title> of my index.html based on the <title> of a child iframe? Take a look at my website for reference If the content within the iframe changes, will the title automatically update along wi ...

javascriptjqueryhtmliframetitle

The dollar sign function operates properly, but encountering issues with the $.ajax function (non-slim)

I'm facing some issues with my jQuery code. I have included jQuery (not slim) and for some reason, $.ajax is failing. However, '$' and 'jQuery' functions are working fine. It seems like a simple problem but I can't seem to fi ...

javascriptjqueryajax

What is the best method to eliminate an invalid element from the DOM?

Below is the code snippet showing the xpaths where the value of $value can be found. We have noticed an abnormal tag td1 in the given URL (visible in the image) which is missing a closing tag. It seems like the developers intentionally placed it there, as ...

phpjavascripthtmldomxpath

Drawing the canvas is taking place prior to the image being fully loaded in JavaScript

Currently, I am in the process of creating a collage using images that are all sized at 174x174 pixels. The images are stored on my server, and while my program can locate them successfully, it requires me to click the "save image" button twice for them to ...

javascripthtml

Why does my text keep aligning to the left when I adjust the width, causing my background to remain attached to the text?

When I add a width attribute to my #information h1 id, it seems to override the text-align: center; property and aligns the text/background to the left instead of center. Basically, I need assistance in centering the headers with the appropriate backgroun ...

htmlcsscentering

Having trouble getting a background image to show up in a table cell when using CSS clear:both?

I am working on an email and I want an image to only show up on mobile devices. To achieve this, I created an empty <td> with a span inside where I styled the span to have a background image. However, my issue is that I want the image to occupy an e ...

htmlcsshtml-tablehtml-email

Demonstrating information using a HighCharts pie graph in a Visual Studio web application

Here is a snippet of code that supplies data for the chart within the View: series: [{ type: 'pie', name: 'Chart Title', data: @Html.Raw(Json.Encode(Model)) }] This piece of code can be foun ...

jquery.netjsonasp.net-mvc-4highcharts

Efficiently Organizing Data Using Coldfusion Loops in Columns and Rows

My issue lies in pulling data from a database to display on my website. I have three keys/attributes (columns) - PostedDate, DataImage, and Source that need to be shown together in one div with the posted date at the top, image in the middle, and source at ...

javascriptmysqlcsssqlcoldfusion

Advanced jQuery Autocomplete with Nested Ajax Requests

I am currently developing a feature that allows users to search for albums using the Spotify Metadata API. The main functionality is working well, but I'm running into an issue with retrieving album cover art when making nested calls. This seems to be ...

javascriptjqueryjquery-uijquery-ui-autocompletespotify

Incorporating JavaScript/jQuery values into C# backend with ASP.NET

Despite attempting all possible methods, I am unable to pass the screen.width value from a JS script on an aspx page to C# in the code behind. Even though the screen.width is correctly assigned, it never gets passed to my hidden field value. <asp:Conte ...

c#javascriptjqueryasp.netcode-behind

Set the jQuery cookie to change the CSS property to hide the element

Currently, I am utilizing the jquery cookie plugin to make the browser remember the state of a CSS after refreshing the page. Below is an excerpt of my code where a button is clicked: $('#cartHolder').attr('style','display: no ...

jquerycssdomcookies

When using jQuery, the .change() function will only be triggered after the user clicks a button or

Looking for assistance with an unusual issue in my JavaScript/jQuery code. The jQuery .change() function on a simple text input element only triggers when I click somewhere on the page, open the Chrome console, or press a key on the keyboard. It doesn&apo ...

javascriptjquery