如何使我的图像轮播响应在移动尺寸上显示 1 张图像？答案

【问题标题】：How can I make my image carousel responsive to display 1 image on mobile size?如何使我的图像轮播响应在移动尺寸上显示 1 张图像？
【发布时间】：2017-02-27 14:38:20
【问题描述】：

目前轮播显示 3 张图片，这在移动设备之前非常棒这是html：

    <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">&lsaquo;</a>
                        <a class="right carousel-control" href="#eventCarousel" data-slide="next">&rsaquo;</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));
    }
});

});

【问题讨论】：

如果你想用轮播做更高级的事情，我建议你放弃内置的 Bootstrap，看看 Owl Carousel。
我现在去看看，谢谢 DavidG
Owl 或 slick 是两种可以为您完成的轮播：kenwheeler.github.io/slick 两者都很棒。

标签： javascript jquery html twitter-bootstrap carousel

【解决方案1】：

尝试为所有窗口大小设置col 值。例如，col-sm-12 col-xs-12 用于小窗口设备，col-md-12 col-lg-12 用于较大窗口设备

【讨论】：

我试了一下，但没有运气，我认为它的内置 Bootstrap Carousel 很难修改