stackoom
  简体   繁体   中英

How to make a Carousel with more than 3 images in Bootstrap?

 原文  2020-02-13 20:12:52  3   3    javascript/ css/ bootstrap-4/ carousel

Question

I'm trying to add more images to my Carousel in Bootstrap. I initially just added this (below) to the ordered list that is class="carousel-indicators"

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

And the new slide (below) inside the div class="carousel-inner" tag along with the other three initial 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>

and when I run the website, scroll through the carousel, and get to the last picture it breaks and I can't go back to any previous pictures or go forward anymore.

I tried the code that was listed in another question titled "Bootstrap 4 Multi Carousel show 4 images instead of 3" and that just broke the carousel completely. Three of the four images appear at once on the screen in a column, one containing the carousel controls. When you press any of the controls the carousel disappears.

3 answers

solution1
 1 ACCPTED  2020-02-13 22:22:04

This is a Slider with 5 images , I hope useful for you. 

 <!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> /* Make the image fully responsive */ .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>

solution2
 0  2020-02-13 20:18:36

here a example. The class it's 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>

solution3
 0  2020-02-13 21:07:53

The code below shows a carousel with 5 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>

暂无
暂无

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

Related Question Make images in bootstrap carousel responsive? how to make images change when clicked for more than 2 images? How to make this type of bootstrap carousel How to make bootstrap carousel interactive? How to scale down images in bootstrap carousel How to advance 3 images at one time in Bootstrap Carousel? How can I make twitter bootstrap 3 carousel centre the active image and show part of the next and previous images? Bootstrap carousel not showing images Bootstrap carousel images not loaded Make center image more bigger than the other in Owl Carousel js
Related Tags
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM