gpt4 book ai didi

javascript - 在移动设备中显示一个 Bootstrap 轮播元素

转载 作者:行者123 更新时间:2023-11-29 17:51:15 25 4
gpt4 key购买 nike

<分区>

我有这个 Bootstrap Carousel,它在桌面 View 中分别显示 2 个元素。但是,我想在移动 View 中一次显示一个元素。我怎样才能做到这一点?

https://jsfiddle.net/v9t2pz9b/

HTML

<div class="container">
<div id="myCarousel" class="carousel slide" data-ride="carousel">
<div class="carousel-inner" role="listbox">
<div class="item active">
<div class="col-sm-6">
block1
</div>
<div class="col-sm-6">
block2
</div>
</div>
<div class="item">
<div class="col-sm-6">
block3
</div>
<div class="col-sm-6">
block4
</div>
</div>

<div class="item">
<div class="col-sm-6">
block5
</div>
<div class="col-sm-6">
block6
</div>
</div>

</div>

<!-- Left and right controls -->
<a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>

JS:

$(document).ready(function(){
$("#myCarousel").carousel();
});

设计中显示的是这样的东西。我想在移动设备上一次只显示一张幻灯片: enter image description here

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com