响应Bootsrap旋转木马项目

时间:2016-04-13 09:51:46

标签: javascript jquery twitter-bootstrap responsive

我正在使用Boostrap轮播,我想让我的旋转木马响应,以便根据屏幕宽度在屏幕上显示不同数量的项目。

例如,假设我想要在旋转木马中显示六件事。

如果此人正在手机上观看,我想一次显示1项,旋转木马下方有6个指示按钮,可在其余部分之间切换。

<section>
    <div class="container">
        <h2>Mobile - 1 box on screen</h2>
            <div class="row">
                <div id="document-slider-mobile" class="carousel slide" data-ride="">
                    <div class="carousel-inner">
                        <ol class="carousel-indicators">
                            <li class="indicator active" data-slide-to="0" data-target="#document-slider-mobile"></li>
                            <li class="indicator" data-slide-to="1" data-target="#document-slider-mobile"></li>
                            <li class="indicator" data-slide-to="2" data-target="#document-slider-mobile"></li>
                            <li class="indicator" data-slide-to="3" data-target="#document-slider-mobile"></li>
                            <li class="indicator" data-slide-to="4" data-target="#document-slider-mobile"></li>
                            <li class="indicator" data-slide-to="5" data-target="#document-slider-mobile"></li>
                        </ol>                       
                        <div class="item col-sm-12 active"><div class="box"><h3>This is box 1</h3></div></div>
                        <div class="item col-sm-12"><div class="box"><h3>This is box 2</h3></div></div>
                        <div class="item col-sm-12"><div class="box"><h3>This is box 3</h3></div></div>
                        <div class="item col-sm-12"><div class="box"><h3>This is box 4</h3></div></div>
                        <div class="item col-sm-12"><div class="box"><h3>This is box 5</h3></div></div>
                        <div class="item col-sm-12"><div class="box"><h3>This is box 6</h3></div></div>
                    </div>
                </div>
            </div>
    </div>
</section>

然而,如果此人正在桌面上观看,我想一次显示4个东西,旋转木马下方有2个指示按钮(第一个有4个项目,第二个有2个项目)。

我已经创建了一个示例来演示各种场景以及轮播的外观和行为。该演示使用3个不同的旋转木马来实现这一点,显然我正在寻找1个响应版本。

这是jsfiddle示例(您可能需要调整面板大小): jsfiddle

Responsive Image example

0 个答案:

没有答案