Stacking Bootstrap carousel items on mobile?

carousel, twitter-bootstrap

Solution

I did manage to do this pretty easily in the end by overriding bootstraps default styling on the carousel items with a media query:

@media (max-width: 767px) {
    #myCarousel {
        .item { 
            display:block;
            padding-bottom:10px;
        }
    }
}

This takes the carousel `.item`s, normally set to `display:none` unless `.active` and shows them one after the other with a little padding. This doesn't disable or suspend bootstrap's carousel behavior, but if you also hide the carousel-indicators and any carousel navigation, then there's no way to access that behavior.

Maybe not the most elegant solution, but it works.

Problem

I'm using a Bootstrap carousel to cycle through sub-sections of a page. While this fits me perfectly on large screens, on mobile I'd prefer to have the sub-sections simply displayed one after the other. Is this possible? So, for example (to clarify) On desktops under the About sections there's a carousel that cycles through Mission, Contact, and Client List with next/prev buttons. On mobile I want those three sections one on top of the other and you just scroll through them normally; no next/prev buttons. Thanks.

Original source