引导轮播，在移动设备上更改幻灯片内容？答案

【问题标题】：Bootstrap carousel, changing slide contents on mobile?引导轮播，在移动设备上更改幻灯片内容？
【发布时间】：2016-05-03 14:36:44
【问题描述】：

我正在使用 Bootstrap 的轮播。在桌面上，每张幻灯片都有 3 个包含文本的 div，因此每张幻灯片都会显示 3 个新文本框。在移动设备上，这工作正常，只有您只能看到每张幻灯片的第一个文本框。

如何更改幻灯片移动的距离，以便我看到每个文本框？目前滑块滑动 3 次，但我需要它在移动设备上滑动 9 次。

提前致谢！

<div class="slider-section">
<div class="container">
    <div id="statistic-slider" class="carousel slide">
        <div class="carousel-inner">
            <div class="item active">
                <div class="slider-text">Body text</div>
                <div class="slider-text">Body text</div>
                <div class="slider-text">Body text</div>
            </div>
            <div class="item">
                <div class="slider-text">Body text</div>
                <div class="slider-text">Body text</div>
                <div class="slider-text">Body text</div>
            </div>
            <div class="item">
                <div class="slider-text">Body text</div>
                <div class="slider-text">Body text</div>
                <div class="slider-text">Body text</div>
            </div>
        </div>
        <a class="carousel-control left" href="#statistic-slider" data-slide="prev"></a>
        <a class="carousel-control right" href="#statistic-slider" data-slide="next"></a>
    </div>
</div>

【问题讨论】：

标签： css twitter-bootstrap slider carousel

【解决方案1】：

如果这只是一个 ResponsivDesign 问题，我建议您将一些 .col-xx-xx 类添加到您的 div 中。如果您现在已经使用了 Bootstrap，那么您将能够拥有更好的结构，例如，您的文本框在移动设备上具有垂直布置，而在桌面上具有水平布置。看看Bootstrap grid system。

其他解决方案可能是制作两个轮播，一个用于桌面，另一个用于移动。您将能够自定义您想要的方式。第一个带有 hidden-xs 类 (see bootstrap functionalities) 及其 3 张幻灯片。第二个是 hidden-md hidden-xx ... 例如，有 3*3 不同的幻灯片。

【讨论】：