当前位置： 文江博客话题详情

如何使用bootstrap创建不同响应迅速的旋转木马

发布于 2025-02-13 09:27:45 字数 3453 浏览 0 评论 0原文

因此，我想创建一个带有bootsrap旋转木马内部分隔的滑块，并进行了以下操作。但是，我该如何做到这一点，以便在SM（Bootstrap的）下方的屏幕中，它变得如此，以至于一个轮播和旋转木马滑块中只有两个分区，并添加了三个滑块，每个滑块每个都有两个分区。在此示例中，说第一个滑块只会有Hello，Hello1，第二个滑块Hello2，Hello3和一个新的滑块，其中包含Hello4和Hello5。

请告诉我如何使用Bootstrap或JavaScript或JQuery进行此操作。

要获得更好的参考，这就是一个示例： https://www.franckmuller.com/#home-news

非常感谢！

.box{
        min-height: 300px;
        display: flex;
        justify-content: center;
        align-items: center;
      }
      .r{
        background-color: red;
      }
      .g{
        background-color: gray;
      }
      .b{
        background-color: blue;
      }
<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Bootstrap demo</title>
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-0evHe/X+R7YkIZDRvuzKMRqM+OrBnVFBL6DOitfPri4tjfHxaWutUpFmBp4vmVor" crossorigin="anonymous">
  </head>
  <body>
    <div class="container">
      <div id="carouselExampleControls" class="carousel slide carousel-dark" data-bs-ride="carousel">
        <div class="carousel-inner">
          <div class="carousel-item active">
            <div class="row">
              <div class="col-md-4 col-sm-4 box r">Hello</div>
              <div class="col-md-4 col-sm-4 box g">Hello1</div>
              <div class="col-md-4 col-sm-4 box b">Hello2</div>
            </div>
          </div>
          <div class="carousel-item">
            <div class="row">
              <div class="col-md-4 col-sm-4 box r">Hello3</div>
              <div class="col-md-4 col-sm-4 box g">Hello4</div>
              <div class="col-md-4 col-sm-4 box b">Hello5</div>
            </div>
          </div>
        </div>
        <button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleControls" 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="#carouselExampleControls" data-bs-slide="next">
          <span class="carousel-control-next-icon" aria-hidden="true"></span>
          <span class="visually-hidden">Next</span>
        </button>
      </div>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-pprn3073KE6tl6bjs2QrFaJGz5/SUsLqktiwsUTF55Jfv3qYSDhgCecCxMW52nD2" crossorigin="anonymous"></script>
  </body>
</html>

原文

So I wanted to create a slider with divisions inside a bootsrap carousel and did the following. However, how can i make it so that in screens below sm(of bootstrap), it becomes such that there are only two divisions in one carousel and a carousel slider is added making three sliders with two divisions each. For this example, say that the first slider will only have hello, and hello1, second slider hello2, hello3 and a new slider is added which contains hello4 and hello5.

Please do tell me how do do this using bootstrap or javascript or jquery.

For better reference, this is the example:https://www.franckmuller.com/#home-news

Thanks a lot !!

.box{
        min-height: 300px;
        display: flex;
        justify-content: center;
        align-items: center;
      }
      .r{
        background-color: red;
      }
      .g{
        background-color: gray;
      }
      .b{
        background-color: blue;
      }
<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Bootstrap demo</title>
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-0evHe/X+R7YkIZDRvuzKMRqM+OrBnVFBL6DOitfPri4tjfHxaWutUpFmBp4vmVor" crossorigin="anonymous">
  </head>
  <body>
    <div class="container">
      <div id="carouselExampleControls" class="carousel slide carousel-dark" data-bs-ride="carousel">
        <div class="carousel-inner">
          <div class="carousel-item active">
            <div class="row">
              <div class="col-md-4 col-sm-4 box r">Hello</div>
              <div class="col-md-4 col-sm-4 box g">Hello1</div>
              <div class="col-md-4 col-sm-4 box b">Hello2</div>
            </div>
          </div>
          <div class="carousel-item">
            <div class="row">
              <div class="col-md-4 col-sm-4 box r">Hello3</div>
              <div class="col-md-4 col-sm-4 box g">Hello4</div>
              <div class="col-md-4 col-sm-4 box b">Hello5</div>
            </div>
          </div>
        </div>
        <button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleControls" 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="#carouselExampleControls" data-bs-slide="next">
          <span class="carousel-control-next-icon" aria-hidden="true"></span>
          <span class="visually-hidden">Next</span>
        </button>
      </div>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-pprn3073KE6tl6bjs2QrFaJGz5/SUsLqktiwsUTF55Jfv3qYSDhgCecCxMW52nD2" crossorigin="anonymous"></script>
  </body>
</html>

如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论， 你可以免费 注册 一个本站的账号。

评论（1）

琴流音 2025-02-20 09:27:45
.box {
  min-height: 300px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.r {
  background-color: red;
}
.g {
  background-color: gray;
}
.b {
  background-color: blue;
}
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container mt-2">
 <div id="carouselExampleControls" class="carousel slide carousel-dark" data-bs-ride="carousel">
  <div class="carousel-inner">
   <div class="carousel-item active">
    <div class="col-md-12 col-sm-12">
     <div class="row row-cols-sm-2">
      <div class="col pe-1 box r">Slide 1</div>
       <div class="col box g">Slide 2</div>
      </div>
     </div>
    </div>
    <div class="carousel-item">
     <div class="col-lg-12 col-md-12 col-sm-12">
      <div class="row row-cols-sm-2">
       <div class="col box r">Slide 3</div>
        <div class="col box g">Slide 4</div>
       </div>
      </div>
     </div>
    </div>
    <button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleControls" 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="#carouselExampleControls" data-bs-slide="next">
     <span class="carousel-control-next-icon" aria-hidden="true"></span>
     <span class="visually-hidden">Next</span>
    </button>
   </div>
  </div>

.box {
  min-height: 300px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.r {
  background-color: red;
}
.g {
  background-color: gray;
}
.b {
  background-color: blue;
}
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container mt-2">
 <div id="carouselExampleControls" class="carousel slide carousel-dark" data-bs-ride="carousel">
  <div class="carousel-inner">
   <div class="carousel-item active">
    <div class="col-md-12 col-sm-12">
     <div class="row row-cols-sm-2">
      <div class="col pe-1 box r">Slide 1</div>
       <div class="col box g">Slide 2</div>
      </div>
     </div>
    </div>
    <div class="carousel-item">
     <div class="col-lg-12 col-md-12 col-sm-12">
      <div class="row row-cols-sm-2">
       <div class="col box r">Slide 3</div>
        <div class="col box g">Slide 4</div>
       </div>
      </div>
     </div>
    </div>
    <button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleControls" 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="#carouselExampleControls" data-bs-slide="next">
     <span class="carousel-control-next-icon" aria-hidden="true"></span>
     <span class="visually-hidden">Next</span>
    </button>
   </div>
  </div>

回复 原文
~没有更多了~

关于作者

少女七分熟

暂无简介

文章
评论
26 人气
发私信

相关话题

更多

热门标签

操作系统 程序设计 IT运维 Linux系统管理 JavaScript 服务器应用 solaris C/C++ PHP Shell BSD Vue.js aix Oracle Python HTML 系统管理 HTML5 CSS 前端
更多

推荐作者

alipaysp_snBf0MSZIv

文章 0 评论 0

梦断已成空

文章 0 评论 0

瞎闹

文章 0 评论 0

凯凯我们等你回来

文章 0 评论 0

寄意

文章 0 评论 0

似梦非梦

文章 0 评论 0

更多

友情链接

文江博客
    我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站，即表示您同意使用 Cookies 和您的相关数据。
    原文