Question 190937 in Html Question posted in
Some basic documentation can be found here.

Html – Bootstrap carousel content doesn't appear between arrows

I’ve encountered this issue while trying to add a carousel element to my project. The result of my code is a working carousel; the arrows work just fine and if I add an autoplay option it also works. However, the content itself is NOT between the arrows.

First, I’ve included the following lines of code in the header section for bootstrap, which I downloaded via npm:

    <link rel="stylesheet" href="./src/main.css">
    <script src="./node_modules/@popperjs/core/dist/umd/popper.min.js"></script>
    <script src="./node_modules/bootstrap/dist/js/bootstrap.bundle.min.js"></script>

Then, I added the elements for the carousel exactly like the one in the bootstrap docs:

            <div id="projectsCarousel" class="carousel slide carousel-fade carousel-dark">
                <div class="carousel-inner">
                    <div class="carousel-item active"><h3>hello</h3></div>
                    <div class="carousel-item">2</div>
                    <div class="carousel-item">3</div>
                    <div class="carousel-item">4</div>
                    <div class="carousel-item">5</div>
                </div>
                <button class="carousel-control-prev" type="button" data-bs-target="#projectsCarousel" data-bs-slide="prev">
                    <span class="carousel-control-prev-icon"></span>
                </button>
                <button class="carousel-control-next" type="button" data-bs-target="#projectsCarousel" data-bs-slide="next">
                    <span class="carousel-control-next-icon"></span>
                </button>
            </div>

As aforementioned, the content itself is NOT between the arrows.

enter image description here

If anyone can help me figure out why this happens I would be so thankful for them!

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">

<div id="projectsCarousel" class="carousel slide carousel-fade carousel-dark">
  <div class="carousel-inner">
    <div class="carousel-item active">
      <h3>hello</h3>
    </div>
    
    <div class="carousel-item">2</div>
    <div class="carousel-item">3</div>
    <div class="carousel-item">4</div>
    <div class="carousel-item">5</div>
  </div>
  
  <button class="carousel-control-prev" type="button" data-bs-target="#projectsCarousel" data-bs-slide="prev">
      <span class="carousel-control-prev-icon"></span>
  </button>
  
  <button class="carousel-control-next" type="button" data-bs-target="#projectsCarousel" data-bs-slide="next">
      <span class="carousel-control-next-icon"></span>
  </button>
</div>

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-kenU1KFdBIe4zVF0s0G1M5b4hcpxyD9F7jL+jjXkk+Q2h455rYXK/7HAuoJl+0I4" crossorigin="anonymous"></script>
Tags:

2

Answers


  1. 0

    The content is not supposed to be between the arrows. If you look at the demo with your browser’s inspector you’ll see that the controls lay over the content. The content sits tight to the left edge of the container, whatever that may be. The control button is also tight to the left (positioned absolutely), but it has some padding which makes it appear shifted inward.

    Either apply padding to your content or use CSS to shift the controls. translateX() might work well. See Carousel Controls Outside of Carousel.

    Login or Signup to reply.
  2. 0

    I think carousel-inner taking full width and align item to left so make carousel-inner display-flex (d-flex),justify-content-center,align-item-center.If not word try to add it in carousel-item also.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search