Turn grids into carousel (slider)

Navigation
2

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, both grids and carousel are native parts of the bootstrap, so I would like to combine these two:

link and link / a>

So the question here is about bootstrap components. Currently it works like this:

  • Screens greater than or equal to 750px wide:

  • Screenssmallerthan750pxwidebreakitems,thisdesignisimitatingacellphonescreen(notdrawingverywell):

  • HoweverIwouldliketoknowifitispossibletotransformitintothis(whensmallerthan750px),thisdrawingisimitatingamobilescreen,thewhitespaceisbecauseithasnomorehtmlelementsandwouldbeabasicexample,butinafullpagespacewouldnotappear:

Thatis,insmallscreensIwouldliketomakecols-intoaslider,sothesecolumnswouldcontinuehorizontalinsteadofbreaking,IrememberifandIdonotmistaketohavealreadyseenasitelikethis,IwasinandIcouldnotparsethecode.

InmycurrentcodeIusetheclasscol-sm-3sothatwhenthescreenissmallerthan750pxtheitemsarenotsidebyside(thebasicconceptoftheboostrapgridsystem),likethis:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script><!--LatestcompiledandminifiedCSS--><linkrel="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>
    
asked by anonymous 23.12.2015 / 22:53

1 answer

2

You've already taken a look at the 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 , so feel free to willingness to choose what suits you best: D

    
23.12.2015 / 23:48
Memory problems loading many images into listView Get MultiSelect content from Listbox and play in a Memo on the same line