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:
Telas menores que 750px de largura quebram os itens, este desenho é imitando uma tela de celular (não desenho muito bem):
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:
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>
hidden
evisible-xs
, e novisible-xs
colocar o slide que vc quiser (existem muitos pra bootstrap). Talvez a resposta desta pergunta que fala sobre ohidden
evisible-xs
possa ajudar...include
nos dois... mas daí não sei se vale a pena.... btw - > shouldiuseacarousel.com :Pvisible-xs
posso dizer que você foi o que mais notou que esta pergunta fala dos componentes nativos, no momento que você cita outro componente ;)