stackoom
  简体   繁体   中英

Bootstrap 4 multi item carousel not responsive, shows only one item in corner in desktop

 原文  2020-10-08 14:13:38  1   1    javascript/ css/ carousel

Question

I would like to add second carousel at the top, before hero, and one difference is that it should be multi item, but shows only one item.

Maybe its becouse of the bigger carousel with showing only one item per slide.

Bootstrap 4

    <div class="container-fluid mt-5">

  <!-- Grid row -->
  <div class="row">

    <!-- Grid column -->
    <div class="col-md-12 mb-4">

      <div class="container text-center my-3">
        <div class="row my-auto">
          <div id="recipeCarousel2" class="carousel slide w-100 " data-ride="carousel">
            <div class="carousel-inner w-100 vv-3" role="listbox">
              <div class="carousel-item active">
                <div class="col-2">
                  <img class="d-block img-fluid"
                    src="https://mdbootstrap.com/img/Photos/Others/images/43.jpg">
                </div>
              </div>
              <div class="carousel-item">
                <div class="col-2">
                  <img class="d-block img-fluid"
                    src="https://mdbootstrap.com/img/Photos/Others/images/43.jpg">
                </div>
              </div>
              <div class="carousel-item">
                <div class="col-2">
                  <img class="d-block img-fluid"
                    src="https://mdbootstrap.com/img/Photos/Others/images/43.jpg">
                </div>
              </div>
              <div class="carousel-item">
                <div class="col-2">
                  <img class="d-block img-fluid"
                    src="https://mdbootstrap.com/img/Photos/Others/images/43.jpg">
                </div>
              </div>
              <div class="carousel-item">
                <div class="col-2">
                  <img class="d-block img-fluid"
                    src="https://mdbootstrap.com/img/Photos/Others/images/43.jpg">
                </div>
              </div>
              <div class="carousel-item">
                <div class="col-2">
                  <img class="d-block img-fluid"
                    src="https://mdbootstrap.com/img/Photos/Others/images/43.jpg">
                </div>
              </div>
            </div>
            <a class="carousel-control-prev" href="#recipeCarousel2" 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="#recipeCarousel2" role="button" data-slide="next">
              <span class="carousel-control-next-icon" aria-hidden="true"></span>
              <span class="sr-only">Next</span>
            </a>
          </div>
        </div>
      </div>

    </div>
    <!-- Grid column -->

  </div>
  <!-- Grid row -->
  
</div>

enter image description here

1 answers

solution1
 0  2020-10-08 16:07:41

Single carousel using multiple image in bootstrap and Multiple carousel with multiple images in single row with different columns.

Below, Carousel code in bootstrap. please let me know if you want the same or not.

Carousel Using Multiple Images.

<!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.5.2/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.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.5.2/js/bootstrap.min.js"></script>
  <style>
 
  .carousel-inner img {
    width: 100%;
    height: 50%;
  }
  </style>
</head>
<body>

<div id="demo" class="carousel slide" data-ride="carousel">

  <!-- Indicators -->
  <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>
  </ul>
  
  <!-- carousel slideshow -->
  <div class="carousel-inner">
    <div class="carousel-item active">
      <img src="https://mdbootstrap.com/img/Photos/Others/images/43.jpg" alt="" width="1100" height="500">
    </div>
    <div class="carousel-item">
      <img src="https://mdbootstrap.com/img/Photos/Others/images/43.jpg" alt="" width="1100" height="500">
    </div>
    <div class="carousel-item">
      <img src="https://mdbootstrap.com/img/Photos/Others/images/43.jpg" alt="" width="1100" height="500">
    </div>
  </div>
  
  <!-- Left and right controls -->
  <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>

Multiple Carousel in a row with multiple columns in bootstrap.

<!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.5.2/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.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.5.2/js/bootstrap.min.js"></script>
  <style>

  .carousel-inner img {
    width: 100%;
    height: 50%;
  }
  </style>
</head>
<body>

<div class="container">
  <div class="row">
    <div class="col-4">
        <div id="carosel1" class="carousel slide" data-ride="carousel">

  <!-- Indicators -->
  <ul class="carousel-indicators">
    <li data-target="#carosel1" data-slide-to="0" class="active"></li>
    <li data-target="#carosel1" data-slide-to="1"></li>
    <li data-target="#carosel1" data-slide-to="2"></li>
  </ul>
  
  <!-- Carousel slideshow -->
  <div class="carousel-inner">
    <div class="carousel-item active">
      <img src="https://mdbootstrap.com/img/Photos/Others/images/43.jpg" width="100" height="50">
    </div>
    <div class="carousel-item">
      <img src="https://mdbootstrap.com/img/Photos/Others/images/43.jpg" width="100" height="50">
    </div>
    <div class="carousel-item">
      <img src="https://mdbootstrap.com/img/Photos/Others/images/43.jpg" width="100" height="50">
    </div>
  </div>
  
  <!-- Left and right controls -->
  <a class="carousel-control-prev" href="#carosel1" data-slide="prev">
    <span class="carousel-control-prev-icon"></span>
  </a>
  <a class="carousel-control-next" href="#carosel1" data-slide="next">
    <span class="carousel-control-next-icon"></span>
  </a>
</div>
    </div>
    
    <div class="col-4">
        <div id="carosel2" class="carousel slide" data-ride="carousel">

  <!-- Indicators -->
  <ul class="carousel-indicators">
    <li data-target="#carosel2" data-slide-to="0"></li>
    <li data-target="#carosel2" data-slide-to="1" class="active"></li>
    <li data-target="#carosel2" data-slide-to="2"></li>
  </ul>
  
  <!-- Carousle slideshow -->
  <div class="carousel-inner">
    <div class="carousel-item">
      <img src="https://mdbootstrap.com/img/Photos/Others/images/43.jpg" width="100" height="50">
    </div>
    <div class="carousel-item active">
      <img src="https://mdbootstrap.com/img/Photos/Others/images/43.jpg" width="100" height="50">
    </div>
    <div class="carousel-item">
      <img src="https://mdbootstrap.com/img/Photos/Others/images/43.jpg" width="100" height="50">
    </div>
  </div>
  
  <!-- Left and right controls -->
  <a class="carousel-control-prev" href="#carosel2" data-slide="prev">
    <span class="carousel-control-prev-icon"></span>
  </a>
  <a class="carousel-control-next" href="#carosel2" data-slide="next">
    <span class="carousel-control-next-icon"></span>
  </a>
</div>
    </div>
    
    <div class="col-4">
        <div id="carosel3" class="carousel slide" data-ride="carousel">

  <!-- Indicators -->
  <ul class="carousel-indicators">
    <li data-target="#carosel3" data-slide-to="0"></li>
    <li data-target="#carosel3" data-slide-to="1"></li>
    <li data-target="#carosel3" data-slide-to="2"  class="active"></li>
  </ul>
  
  <!-- Carousel slideshow -->
  <div class="carousel-inner">
    <div class="carousel-item">
      <img src="https://mdbootstrap.com/img/Photos/Others/images/43.jpg" width="100" height="50">
    </div>
    <div class="carousel-item">
      <img src="https://mdbootstrap.com/img/Photos/Others/images/43.jpg" width="100" height="50">
    </div>
    <div class="carousel-item active">
      <img src="https://mdbootstrap.com/img/Photos/Others/images/43.jpg" width="100" height="50">
    </div>
  </div>
  
  <!-- Left and right controls -->
  <a class="carousel-control-prev" href="#carosel3" data-slide="prev">
    <span class="carousel-control-prev-icon"></span>
  </a>
  <a class="carousel-control-next" href="#carosel3" data-slide="next">
    <span class="carousel-control-next-icon"></span>
  </a>
</div>
    </div>
  </div>
</div>


</body>
</html>

暂无
暂无

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 Bootstrap Multi Item Carousel not responsive Show 1 item only in Bootstrap Multi Carousel in mobile Multi-item responsive carousel bootstrap multi item carousel moving at one item at once click? Bootstrap carousel with one item Issue with jquery zoom and bootstrap multi item carousel Bootstrap Infinite carousel (loop) multi-Item Multi-item carousel in PHP and Bootstrap Multi item carousel Scroll in one item is affecting another item in bootstrap carousel
Related Tags
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM