[英]How can I make my image carousel responsive to display 1 image on mobile size?
目前,輪播展示了3張圖片,這在移動設備之前非常棒,我想顯示一個可以瀏覽的圖片,任何人都可以編輯我的代碼或向正確的方向推送我以發現如何實現此目標。 :
<div class="container-fluid imageCarousel">
<div class="row">
<div class="col-md-12">
<div id="myCarousel" class="container carousel fdi-Carousel slide">
<!-- Carousel items -->
<div class="carousel fdi-Carousel slide" id="eventCarousel" data-interval="0">
<div class="carousel-inner onebyone-carosel">
<div class="item active">
<div class="col-md-4">
<a href="#"><img src="img/home-image1.png" class="img-responsive center-block"></a>
</div>
</div>
<div class="item">
<div class="col-md-4">
<a href="#"><img src="img/home-image2.png" class="img-responsive center-block"></a>
</div>
</div>
<div class="item">
<div class="col-md-4">
<a href="#"><img src="img/home-image3.png" class="img-responsive center-block"></a>
</div>
</div>
<div class="item">
<div class="col-md-4">
<a href="#"><img src="img/home-image4.png" class="img-responsive center-block"></a>
</div>
</div>
</div>
<a class="left carousel-control" href="#eventCarousel" data-slide="prev">‹</a>
<a class="right carousel-control" href="#eventCarousel" data-slide="next">›</a>
</div>
<!--/carousel-inner-->
</div><!--/myCarousel-->
</div>
</div>
</div>
這是當前的JS:
$(document).ready(function () {
$('#myCarousel').carousel({
interval: 10000
})
$('.fdi-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));
}
});
});
嘗試為所有窗口大小設置col
值。 例如,小窗口設備使用col-sm-12 col-xs-12
,大窗口設備使用col-md-12 col-lg-12
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.