Question

我正在使用bootsrtap轮播来创建一个旋转木马来显示可以滚动的项目。

这就是它在桌面上的外观

这就是它在移动设备中的显示方式

这是html代码

<div class="carousel slide" data-ride="carousel" data-type="multi" data-interval="2000" id="featuredCarousel">
    <div class="carousel-inner">
        <div class="item active">
            <div class="col-md-4">
                <!-- div content -->
            </div>
        </div>
        <div class="item">
            <div class="col-md-4">
                <!-- div content -->
            </div>
        </div>
        <div class="item">
            <div class="col-md-4">
                <!-- div content -->
            </div>
        </div>
        <div class="item">
            <div class="col-md-4">
                <!-- div content -->
            </div>
        </div>
    </div>
    <a class="left carousel-control text-info" href="#featuredCarousel" data-slide="prev"><i class="text-info glyphicon glyphicon-chevron-left"></i></a>
    <a class="right carousel-control text-info" href="#featuredCarousel" data-slide="next"><i class="text-info glyphicon glyphicon-chevron-right"></i></a>
</div>

这是javascript代码

<script>
$(function() {

    $('#featuredCarousel').carousel({
        interval: 10000
    })
    console.log($('.item'))
    $('.item').each(function() {

        var next = $(this).next();
        console.log(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));
        }
    });
});
</script>

桌面视图中的分割数量很好，但我想在移动设备上只显示一个项目并停留在幻灯片上。

Answer 1

我建议改用Flickity。如果您将轮播项目组织到Bootstrap列中（例如将每个项目放入＆＃34; col-md-4＆＃34;），则Flickity将尊重Bootstrap CSS并识别每个屏幕分辨率滚动的项目数。 / p>

Bootstrap轮播在移动设备上显示单项

1 个答案: