Ways to eliminate the white background placed behind the arrow on my bootstrap carousel

I've been attempting to create a video carousel using Bootstrap 5, and one issue I'm encountering is the appearance of a white background when hovering over the arrow. Normally, it shouldn't display a background, but for some reason, it does.

click to enlarge

https://i.sstatic.net/Njn3gm.png

Code Example

.heading2 {
  font-size: 30px;
  text-align: center;
  font-family: 'Poppins', sans-serif;
}

.carousel-inner {
  width: 100%;
  height: auto;
}
<div class="heading2">
  <h3>Film/Video Editing Projects</h3>
  <!-- Carousel wrapper -->
  <div id="carouselVideoExample" class="carousel slide carousel-fade" data-bs-ride="carousel">
    <!-- Indicators -->
    <div class="carousel-indicators">
      <button type="button" data-bs-target="#carouselVideoExample" data-bs-slide-to="0" class="active" aria-current="true" aria-label="Slide 1"></button>
      <button type="button" data-bs-target="#carouselVideoExample" data-bs-slide-to="1" aria-label="Slide 2"></button>
      <button type="button" data-bs-target="#carouselVideoExample" data-bs-slide-to="2" aria-label="Slide 3"></button>
    </div>

    <!-- Inner -->
    <div class="carousel-inner">
      <!-- Single item -->
      <div class="carousel-item active">
        <video controls class="d-block w-100">
           <source src="https://placehold.co/3840x2160/blue/white.mp4?text=video 1" type="video/mp4" />
        </video>
        <div class="carousel-caption d-none d-md-block">
          <h5>First slide label</h5>
          <p>
            Nulla vitae elit libero, a pharetra augue mollis interdum.
          </p>
        </div>
      </div>
      <!-- Single item -->
      <div class="carousel-item">
        <video controls class="d-block w-100">
          <source src="https://placehold.co/3840x2160/black/white.mp4?text=video+2" type="video/mp4" />
        </video>
        <div class="carousel-caption d-none d-md-block">
          <h5>Second slide label</h5>
          <p>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit.
          </p>
        </div>
      </div>

      <!-- Single item -->
      <div class="carousel-item">
        <video controls class="d-block w-100">
          <source src="https://placehold.co/3840x2160/green/white.mp4?text=video+3" type="video/mp4" />
        </video>
        <div class="carousel-caption d-none d-md-block">
          <h5>Third slide label</h5>
          <p>
            Praesent commodo cursus magna, vel scelerisque nisl consectetur.
          </p>
        </div>
      </div>
    </div>
    <!-- Inner -->

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

  <!-- Bootstrap 5.3 -->
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="ec8e8383989f989e8d9cacd9c2dfc2de">[email protected]</a>/dist/css/bootstrap.min.css">
  <script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="fc9e9393888f888e9d8cbcc9d2cfd2ce">[email protected]</a>/dist/js/bootstrap.bundle.min.js"></script>

htmlcsstwitter-bootstrapbootstrap-5bootstrap-carousel

Answer №1

There are two separate Content Delivery Networks (CDNs) serving Bootstrap, each with a different version - 5.0.2 and 5.3.2. It is recommended to use only one version to avoid conflicts, with the latest version being 5.3.2.


.heading2 {
  font-size: 30px;
  text-align: center;
  font-family: 'Poppins', sans-serif;
}
.carousel-inner {
  width: 100%;
  height: auto;
}
.carousel-control-prev:hover,
.carousel-control-next:hover {
    background-color: transparent !important;
}
<!--Consider using only the most recent version of Bootstrap.-->
 <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="40222f2f34333432213000756e736e72">[email protected]</a>/dist/css/bootstrap.min.css">
<script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="a1c3ceced5d2d5d3c0d1e1948f928f93">[email protected]</a>/dist/js/bootstrap.bundle.min.js"></script>
<style>

</style>
<div class="heading2">
  <h3>Film/Video Editing Projects</h3>
  <div id="carouselVideoExample" class="carousel slide carousel-fade" data-bs-ride="carousel">
    <div class="carousel-indicators">
      <button type="button" data-bs-target="#carouselVideoExample" data-bs-slide-to="0" class="active" aria-current="true" aria-label="Slide 1"></button>
      <button type="button" data-bs-target="#carouselVideoExample" data-bs-slide-to="1" aria-label="Slide 2"></button>
      <button type="button" data-bs-target="#carouselVideoExample" data-bs-slide-to="2" aria-label="Slide 3"></button>
    </div>
    <div class="carousel-inner">
      <div class="carousel-item active">
        <video controls class="d-block w-100">
          <source src="https://placehold.co/3840x2160/blue/white.mp4?text=video 1" type="video/mp4" />
        </video>
        <div class="carousel-caption d-none d-md-block">
          <h5>First slide label</h5>
          <p>
            Nulla vitae elit libero, a pharetra augue mollis interdum.
          </p>
        </div>
      </div>
      <div class="carousel-item">
        <video controls class="d-block w-100">
          <source src="https://placehold.co/3840x2160/black/white.mp4?text=video+2" type="video/mp4" />
        </video>
        <div class="carousel-caption d-none d-md-block">
          <h5>Second slide label</h5>
          <p>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit.
          </p>
        </div>
      </div>
      <div class="carousel-item">
        <video controls class="d-block w-100">
          <source src="https://placehold.co/3840x2160/green/white.mp4?text=video+3" type="video/mp4" />
        </video>
        <div class="carousel-caption d-none d-md-block">
          <h5>Third slide label</h5>
          <p>
            Praesent commodo cursus magna, vel scelerisque nisl consectetur.
          </p>
        </div>
      </div>
    </div>
    <button class="carousel-control-prev" type="button" data-bs-target="#carouselVideoExample" 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="#carouselVideoExample" data-bs-slide="next">
      <span class="carousel-control-next-icon" aria-hidden="true"></span>
      <span class="visually-hidden">Next</span>
    </button>
  </div>
</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

Is the use of the auto image attribute height/width impacting rendering performance?

Currently, I am facing an issue with setting the height and width attributes for an image as I do not have access to its dimensions from the server. One solution I am considering is setting both the width and height values to auto. For example: img { ...

htmlcssimage

Is it possible to execute a function defined within an eval() function using setInterval()?

const evaluation = eval(document.getElementById("codearea").value); setInterval(evaluation, 10); I am seeking a way to access a function that is declared within the eval function, for example: setInterval(evaluation.examplefunc, 10) I attempted ...

javascripthtmlthree.js

What could be the reason for a querySelector returning null in a Nextjs/React application even after the document has been fully loaded?

I am currently utilizing the Observer API to track changes. My objective is to locate the div element with the id of plTable, but it keeps returning as null. I initially suspected that this was due to the fact that the document had not finished loading, ...

javascripthtmlreactjsdomnext.js

Changing Parameters in Absolutely Positioned Sections

I have successfully created a fixed header with a higher z-index than the body content, allowing the content to slide underneath it. To position the content div directly below the fixed header, I applied a position:relative and specified a top value. Init ...

htmlcssposition

What is the best way to create a dynamic JavaScript counter, like one that counts the world's population

Can someone guide me on creating a real-time JavaScript count-up feature that doesn't reset when the page reloads? Any tips or examples similar to would be much appreciated. Thank you! ...

javascripthtmlcss

The hyperlink is malfunctioning

Seeking assistance with this issue. The menu items below (Get on Amazon etc) are able to change the information displayed on the page, however, the first menu should redirect to my index page but it's not working for some reason. <!DOCTYPE html> ...

htmlhref

Leveraging the (click) event within an HTML template to manage a [hidden] element located in a different template using Angular 2

Within my project, I have two TypeScript files, each containing HTML templates inside the @Component. In one of the templates, there are info cards that can be collapsed or expanded using [hidden]="collapsed". The following function is present in both file ...

javascripthtmlangularjsionic-frameworkangular

Display/Conceal JavaScript

I recently implemented a JavaScript function on my website to show/hide specific elements. However, being new to JavaScript, I have encountered some difficulties. I've spent quite some time troubleshooting the code but haven't been able to pinpoi ...

javascripthtml

Ways to verify the presence of an element in a list

I found this interesting JS code snippet: ;(function ($) { $('.filter-opts .opt').click(function(){ var selectedName = $(this).html(); $('.append').append('<li>' + selectedName + '</li> ...

javascriptjqueryhtmlcss

What are the steps to effectively utilize <ul> for showcasing scrolling content?

I stumbled upon and found it to be a great inspiration for my project. I tried replicating the layout of the listed items on the site: .wrap { display: block; list-style: none; position: relative; padding: 0; margin: 0; border: ...

javascripthtmlcss

After following the official guide, I successfully installed Tailwind CSS. However, I am facing issues with utilizing the `bg-black` className for styling the background,

Following the installation guide for Tailwind CSS, I ran the command npm install -D tailwindcss postcss autoprefixer npx tailwindcss init -p. Despite this, the background className (bg-black) is not working as expected. Here are the file paths: Directory ...

javascripthtmlcsstailwind-css

Dynamic elements create an interactive horizontal scrolling experience

I have square elements that will be displayed in a row on the screen extension. These elements are generated dynamically, starting with 2 and going up to 50. Depending on the screen size and number of elements, there may be overflow. In such cases, I want ...

css

Creating a Stylish Funnel Graph using CSS

I am currently working on customizing a funnel chart based on data from my database that is displayed on the page. Everything is functioning correctly except for the CSS rendering of the chart. <ul id="funnel-cht"> <li style="height:70px;widt ...

htmlcsscharts

Ensure the left column extends all the way down

I've been struggling with this issue for almost three days now. After reading numerous articles on creating a three-column layout and experimenting with absolute and relative positioning, I'm still not able to achieve the desired result. What I& ...

css

What is the most effective way to iterate through an array of objects and retrieve the results in a key-value format?

I am dealing with an array of objects that may seem a bit complex initially, but I will simplify it as much as possible. Each object in the array has properties like Engineering, Environment, and others, each containing a sub-object called radars. The rada ...

javascripthtmlreactjsarraysloops

What is the best way to implement next and previous buttons in a slideshow using code?

Looking to enhance my slideshow by replacing the standard "Next" and "Previous" text buttons with custom JPEG images I've created. Anyone familiar with the steps needed to make this switch in the HTML code? Current HTML code in use: <body sty ...

jqueryhtmlcssslideshow

What are some ways to implement webkit-line-clamp on a website?

I'm trying to shorten my paragraph using the following CSS code: white-space: nowrap; overflow: hidden; text-overflow: ellipsis; However, the issue is that it condenses everything into one line. I actually want the text to display on 3 lines before t ...

htmlcsswordpressweb

Retrieve items from the parent row of selected checkboxes

Within my table, I have the following row. <tr class="data_rows" ng-repeat='d in t2'> <td class="tds"> <input class='checkBoxInput' type='checkbox' onchange='keepCount(this)'></td> &l ...

javascripthtmlangularjs

Achieving a consistent border-radius effect during hover transitions

I designed a div that initially displays an image, but upon hovering over it, a second div with text and a solid colored background appears to mask the original content. To see what I'm talking about, check out my jsfiddle: 'Mask on Hover' ...

htmlcsscss-transitions

Is using .htaccess a reliable method for securing a specific file on the server?

Running a classifieds website comes with its own set of challenges, one being the need for an administrator to have the ability to remove classifieds at their discretion. To address this issue, I have developed a simple function that allows me to specify t ...

phpjavascripthtmlsecurity.htaccess