Responsive Bootstrap Carousel Items

问题

I'm using Bootstrap carousel, I want to make my carousel responsive so that it displays a different number of items on screen depending on the screen width.

For example, lets say I have six things I want to display in a carousel.

If the person is viewing on a mobile I want to display 1 item at a time with 6 indicator buttons beneath the carousel to toggle between the rest.

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

However, If the person is viewing on a desktop i want to display 4 things at a time with 2 indicator buttons beneath the carousel (1st has 4 items and 2nd has 2 items).

I've created an example to demonstrate the various scenarios and what the carousel should look and behave like. The demo uses 3 different carousels to achieve this, obviously i'm looking for 1 responsive version.

Here's the jsfiddle example (you may need to resize the panel): jsfiddle

来源：https://stackoverflow.com/questions/36594717/responsive-bootstrap-carousel-items