在移动的上自定义Bootstrap 5 carousel(多个项目，但不是单行)

uemypmqf 于 2023-06-20 发布在 Bootstrap

关注(0)|答案(1)|浏览(90)

我面临的问题，而我试图自定义移动的的旋转木马布局。我希望它显示的每一个项目的旋转木马在移动的，而不是只显示一个，但在尝试发挥一些CSS和JS，特别是与displayfloat或max-witdh我只是开始认为这是不可能的，或者我不知道在哪里看/看错误的地方/属性。我加入了2张照片，所以你们可以看到我试图实现的目标。
我想达到的目标：

我有什么：

示例HTML代码是一个非常基本的，我不包括CSS，因为这是一个在这里只是为了设计目的。

<div id="solutions-carousel" class="carousel slide d-block d-md-none">
<div class="carousel-inner">
<div class="carousel-item active">
  <a href="#" class="img-link"><img src="./img.png" alt=""></a>
  <a href="#">text</a>
</div>
<div class="carousel-item">
  <a href="#" class="img-link"><img src="./img.png" alt=""></a>
  <a href="#">text</a>
</div>
<div class="carousel-item active">
  <a href="#" class="img-link"><img src="./img.png" alt=""></a>
  <a href="#">text</a>
</div>
<div class="carousel-item active">
  <a href="#" class="img-link"><img src="./img.png" alt=""></a>
  <a href="#">text</a>
</div>
<div class="carousel-item active">
  <a href="#" class="img-link"><img src="./img.png" alt=""></a>
  <a href="#">text</a>
</div>
<div class="carousel-indicators">
  <button type="button" data-bs-target="#solutions-carousel" data-bs-slide-to="0" class="active" aria-current="true" aria-label="Slide 1"></button>
  <button type="button" data-bs-target="#solutions-carousel" data-bs-slide-to="1" aria-label="Slide 2"></button>
  <button type="button" data-bs-target="#solutions-carousel" data-bs-slide-to="2" aria-label="Slide 3"></button>
  <button type="button" data-bs-target="#solutions-carousel" data-bs-slide-to="3" aria-label="Slide 3"></button>
  <button type="button" data-bs-target="#solutions-carousel" data-bs-slide-to="4" aria-label="Slide 3"></button>
 </div>

有什么想法吗？干杯（抱歉英语不好）。

twitter-bootstrap

来源：https://stackoverflow.com/questions/76466567/customize-bootstrap-5-carousel-on-mobile-several-items-but-not-in-a-single-row

1条答案

按热度按时间

lndjwyie1#

我想类似的问题和案例已经在另一个帖子中得到了回答。我找到了一些可能对你有帮助的参考资料，我会给予你一些链接。Another thread in stackoverflow
你也可以使用这个JS代码：

$('.multi-item-carousel').carousel({
  interval: false
});

// for every slide in carousel, copy the next slide's item in the slide.
// Do the same for the next, next item.
$('.multi-item-carousel .item').each(function(){
  var next = $(this).next();
  if (!next.length) {
    next = $(this).siblings(':first');
  }
  next.children(':first-child').clone().appendTo($(this));
  
  if (next.next().length>0) {
    next.next().children(':first-child').clone().appendTo($(this));
  } else {
    $(this).siblings(':first').children(':first-child').clone().appendTo($(this));
  }
});

免责声明：这些答案/代码片段不是我的。我从莫里斯·梅尔彻斯的https://codepen.io/mephysto/pen/ZYVKRY上得到的

赞(0）回复(0）举报 2023-06-20

我来回答

在移动的上自定义Bootstrap 5 carousel(多个项目，但不是单行)

1条答案

相关问题

热门标签

最新问答