Transforming grids into Carousel (slider)

Question

I would like to know if it is possible to make a group of cols-* stay as carouel/slider only when less than 750px.

First of all, for those who do not understand bootstrap well, both grids and Carousel are native parts of bootstrap, ie I would like to combine these two:

http://getbootstrap.com/examples/grid/ and http://getbootstrap.com/examples/carousel/

So the question here is about the bootstrap components. It currently works like this:

• Screens larger or equal than 750px wide:

  

• Screens smaller than 750px wide break the items, this drawing is imitating a cell phone screen (not drawing very well):

  

• However I wonder if it is possible to turn it into this (when less than 750px), this drawing is imitating a cell screen, the white space is because it has no more html elements and would be a basic example, but on a full page the space would not appear:

  

In other words, in small screens I would like to transform the cols- in a slider, so these columns would continue horizontally instead of breaking, I remember if and I did not mistake having seen a site like this, I was on mobile and I could not analyze the code.

In my current code I use the class col-sm-3 so that when the screen is less than 750px the items are not standing next to each other (the basic concept of boostrap grid system), so:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">

<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css" integrity="sha384-fLW2N01lMqjakBkx3l/M9EahuwpSfeNvV63J5ezn3uZzapT0u7EYsXMjQV+0En5r" crossorigin="anonymous">

<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>

<section>
        <h2 class="section-heading text-center">Lançamentos</h2>
        <hr class="primary">
        <div class="row nospace">
            <div class="col-sm-3">
                <div class="item">
                    <img src="images/produto1.jpg" class="img-responsive">
                    <h3>Produto</h3>
                </div>
            </div>
            <div class="col-sm-3">
                <div class="item">
                    <img src="images/produto2.jpg" class="img-responsive">
                    <h3>Produto</h3>
                </div>
            </div>
            <div class="col-sm-3">
                <div class="item">
                    <img src="images/produto3.jpg" class="img-responsive">
                    <h3>Produto</h3>
                </div>
            </div>
            <div class="col-sm-3">
                <div class="item">
                    <img src="images/produto4.jpg" class="img-responsive">
                    <h3>Produto</h3>
                </div>
            </div>
        </div>
    </section>

Answer 1

Have you taken a look at Owl Carousel it is fully responsive and easy to deploy with Bootstrap.

HTML:

<div class="container">
    <div class="owl-carousel" id="trigger-do-javascript-para-fazer-o-carousel-funcionar">
        <div class="row">
            <div class="item">
                <div class="col-xs-12 col-sm-6 col-md-4">
                    <!-- conteúdo do carousel -->
                </div>
            </div>
            <div class="item">
                <div class="col-xs-12 col-sm-6 col-md-4">
                    <!-- conteúdo do carousel -->
                </div>
            </div>
            <div class="item">
                <div class="col-xs-12 col-sm-6 col-md-4">
                    <!-- conteúdo do carousel -->
                </div>
            </div>
        </div>
    </div> <!-- /.owl-carousel -->
</div> <!-- /.container -->

CSS:

#trigger-do-javascript-para-fazer-o-carousel-funcionar .item { margin: 3px; }
#trigger-do-javascript-para-fazer-o-carousel-funcionar .item img {
    display: block;
    width: 100%;
    height: auto;
}

Javascript (jQuery):

$(document).ready(function() {
    $("#trigger-do-javascript-para-fazer-o-carousel-funcionar").owlCarousel({
        autoPlay: 3000, //Set AutoPlay to 3 seconds
        itemsCustom : [
            [0, 2],     // menos de 450px mostra 2 itens
            [450, 4],   // em 450px mostra 4 itens
            [600, 7],   // em 600px mostra 7 itens
            [700, 9],   // em 700px mostra 9 itens
            [1000, 10], // em 1000px mostra 10 itens
            [1200, 12], // em 1200px mostra 12 itens
        ],
    });
});

The Owl Carousel has several different examples of Carousel, then feel free to choose the one that best suits you :D