堆栈内存溢出
  简体   繁体   English

Bootstrap 4 多项目轮播没有响应，在桌面的角落只显示一个项目

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

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

问题描述

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引导程序 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 个解决方案

解决方案1
 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.下面，bootstrap 中的 Carousel 代码。 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>

暂无
暂无

声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

相关问题 Bootstrap 多项目轮播无响应 - Bootstrap Multi Item Carousel not responsive 仅在移动设备的Bootstrap Multi Carousel中显示1个项目 - 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 jQuery Zoom和Bootstrap Multi Item Carousel的问题 - Issue with jquery zoom and bootstrap multi item carousel Bootstrap无限轮播（循环）多项目 - Bootstrap Infinite carousel (loop) multi-Item PHP和Bootstrap中的多项目轮播 - Multi-item carousel in PHP and Bootstrap 多项目轮播 - Multi item carousel 滚动一项会影响引导轮播中的另一项 - Scroll in one item is affecting another item in bootstrap carousel
相关标签
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM