引导轮播，是否要在移动设备上更改幻灯片内容? [英] Bootstrap carousel, changing slide contents on mobile?

问题描述

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

I am using Bootstrap's carousel. On desktop each slide has 3 div's in it containing text, so with each slide 3 new text boxes are revealed. On mobile this works fine only you can only see the first text box of every slide.

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

How can I change the distance a slide moves so that I see every text box? Currently the slider slides 3 times, but I need it to slide 9 times on mobile.

提前谢谢！

<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>

推荐答案

如果仅是ResponsivDesign问题，我建议您向div中添加一些.col-xx-xx类.如果您已经使用过Bootstrap，现在可以使用更好的结构，例如在移动设备上垂直放置的文本框，在桌面上水平放置的文本框.看一下引导网格系统.

If it's just a ResponsivDesign issue I recommand you to add some .col-xx-xx classes to your div. If you already use Bootstrap you already now that but, you will be able to have a better structure, yours textboxs with a vertical disposition on mobile and horizontal in desktop for example. Have a look on Bootstrap grid system.

其他解决方案可能是制作两个轮播，一个用于桌面，另一个用于移动.您将能够自定义两者的使用方式.第一个带有hidden-xs类(请参阅引导程序功能)及其3张幻灯片.第二个带有hidden-md hidden-xx ...，例如3 * 3个不同的幻灯片.

Other solution could be to make two carousels, one for desktop and another for mobile. You will be able to customize the way you want both of them. The first one with hidden-xs class (see bootstrap functionalities) and its 3 slides. The second one with hidden-md hidden-xx ... and having 3*3 distinct slides for example.

这篇关于引导轮播，是否要在移动设备上更改幻灯片内容?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！