2

Gostaria de saber se é possível fazer um grupo de cols-* ficar como carouel/slider apenas quando menor que 750px.

Antes de tudo, pra quem não entende bem de bootstrap, tanto os grids quanto o carousel são partes nativas do bootstrap, ou seja eu gostaria de combinar estes dois:

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

Então a duvida aqui é sobre os componentes do bootstrap. Atualmente funciona assim:

  • Telas maiores ou iguais que 750px de largura:

    grid no desktop ou tablets

  • Telas menores que 750px de largura quebram os itens, este desenho é imitando uma tela de celular (não desenho muito bem):

    grid em um celular

  • No entanto gostaria de saber se é possível transforma-lo nisto (quando menor que 750px), este desenho é imitando uma tela de celular, o espaço em branco é porque não tem mais elementos html e seria um exemplo básico, mas em uma página completa o espaço não iria aparecer:

    grid no carousel/slider

Ou seja em telas pequenas eu gostaria de transformar os cols- em um slider, então estas colunas continuariam na horizontal ao invés de quebrar, me lembro se e eu não me engano de já ter visto um site assim, eu estava no celular e não consegui analisar o código.

No meu código atual eu uso a classe col-sm-3 pra que quando a tela for menor que 750px os itens são não fiquem um do lado do outro (o conceito básico do sistema de grid do boostrap), assim:

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

7
  • 1
    Não tenho certeza, mas não seria apenas usar hidden e visible-xs, e no visible-xs colocar o slide que vc quiser (existem muitos pra bootstrap). Talvez a resposta desta pergunta que fala sobre o hidden e visible-xs possa ajudar...
    – gustavox
    24/12/2015 às 0:19
  • @gustavox Gostei da ideia, mas os itens ficariam duplicados na página :/ 24/12/2015 às 0:24
  • Se rolar PHP daria pra fazer uma template e colocar um include nos dois... mas daí não sei se vale a pena.... btw - > shouldiuseacarousel.com :P
    – gustavox
    24/12/2015 às 0:27
  • 1
    Bom, só pra constar que obviamente não fui eu.
    – gustavox
    28/12/2015 às 19:54
  • 1
    Pelo seu comentário sobre o visible-xs posso dizer que você foi o que mais notou que esta pergunta fala dos componentes nativos, no momento que você cita outro componente ;) 28/12/2015 às 19:57

1 Resposta 1

2

Você já deu uma olhada no Owl Carousel ele é totalmente responsivo e de fácil implementação com o 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
        ],
    });
});

O Owl Carousel possui vários exemplos diferentes de carousel, então sinta-se a vontade de escolher o que melhor lhe agradar :D

1
  • +1 pois é realmente uma biblioteca muito boa, só não é bem o que procuro, pois no meu caso gostaria que acima de 749px não houve-se o carousel. Na verdade a necessidade do carousel é mais pra melhorar a experiencia mobile. Mas mesmo assim é uma ótima resposta e vai ajudar outros usuários ;) 24/12/2015 às 23:36

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .