在移动设备上自定义 Bootstrap 5 轮播(多个项目,但不在一行)
P粉763662390
P粉763662390 2023-09-05 11:53:56
0
1
602
<p>我在尝试自定义移动设备上的轮播布局时遇到问题。 我希望它在移动设备上显示轮播的每一项,而不是只显示一项,但在尝试使用一些 CSS 和 JS 之后,尤其是使用 <code>display</code> <code>float</code> 或<code>max-witdh</code> 我刚刚开始认为这是不可能的,或者我不知道在哪里查看/查看错误的位置/属性。 我加入了两张图片,这样你们就可以看到我想要实现的目标。</p> <p>我想要实现的目标: </p> <p>我有什么: </p> <p>示例 html 代码是非常基本的代码,我不包括 CSS,因为这只是出于设计目的。</p> <pre class="brush:php;toolbar:false;"><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"> <按钮类型=“按钮” data-bs-target=“#solutions-carousel” data-bs-slide-to=“0”类=“活跃” aria-current=“真” aria-label="幻灯片 1"</button> <按钮类型=“按钮” data-bs-target=“#solutions-carousel” data-bs-slide-to=“1” aria-label="幻灯片 2"</button> <按钮类型=“按钮” data-bs-target=“#solutions-carousel” data-bs-slide-to=“2” aria-label="幻灯片 3"</button> <按钮类型=“按钮” data-bs-target=“#solutions-carousel” data-bs-slide-to=“3” aria-label="幻灯片 3"</button> <按钮类型=“按钮” data-bs-target=“#solutions-carousel” data-bs-slide-to=“4” aria-label="幻灯片 3"</button> </div></pre> <p>有什么想法吗?干杯意(书面上用英语表示抱歉)。</p>
P粉763662390
P粉763662390

全部回复(1)
P粉029057928

我认为类似的问题和案例之前已经在另一个线程中得到了回答。我找到了一些可能对您有帮助的参考资料,我会给您一些链接。 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));
  }
});

免责声明:这些答案/代码片段不是我的。我从 Maurice melchers 的 https://codepen.io/mephysto/pen/ZYVKRY 得到它

热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板