Carrossel Responsivo Vertical com jquery
ANTERIOR
Gerador QR code Gratuito
Postado: 10 de outubro de 2024
Tempo de Leitura: 3 Minutos
Carrossel Responsivo Vertical com jquery.
Neste artigo vamos fazer um carrossel na vertical com jquery.
Vamos usar o plugin bxslider ele um plugin de slider totalmente responsivo que permite criar um controle deslizante de conteúdo que pode conter imagens, vídeo ou conteúdo HTML. veja abaixo na prática.
Html:
HTML
<div class="box-carrossel">
<div class="bxCarrosel">
<div class="artigos-carrossel">
<div class="imagem">
<img src="uploads/1.jpg">
</div>
<div class="texto">
<p>A expressão Lorem ipsum em design gráfico e editoração é um texto padrão em latim utilizado na produção gráfica...</p>
<a href="#" title="Leia mais">Leia mais</a>
</div>
</div><!--1-->
<div class="artigos-carrossel">
<div class="imagem">
<img src="uploads/2.jpg">
</div>
<div class="texto">
<p>A expressão Lorem ipsum em design gráfico e editoração é um texto padrão em latim utilizado na produção gráfica...</p>
<a href="#" title="Leia mais">Leia mais</a>
</div>
</div><!--2-->
<div class="artigos-carrossel">
<div class="imagem">
<img src="uploads/3.jpg">
</div>
<div class="texto">
<p>A expressão Lorem ipsum em design gráfico e editoração é um texto padrão em latim utilizado na produção gráfica...</p>
<a href="#" title="Leia mais">Leia mais</a>
</div>
</div><!--3-->
<div class="artigos-carrossel">
<div class="imagem">
<img src="uploads/4.jpg">
</div>
<div class="texto">
<p>A expressão Lorem ipsum em design gráfico e editoração é um texto padrão em latim utilizado na produção gráfica...</p>
<a href="#" title="Leia mais">Leia mais</a>
</div>
</div><!--4-->
<div class="artigos-carrossel">
<div class="imagem">
<img src="uploads/5.jpg">
</div>
<div class="texto">
<p>A expressão Lorem ipsum em design gráfico e editoração é um texto padrão em latim utilizado na produção gráfica...</p>
<a href="#" title="Leia mais">Leia mais</a>
</div>
</div><!--5-->
<div class="artigos-carrossel">
<div class="imagem">
<img src="uploads/6.jpg">
</div>
<div class="texto">
<p>A expressão Lorem ipsum em design gráfico e editoração é um texto padrão em latim utilizado na produção gráfica...</p>
<a href="#" title="Leia mais">Leia mais</a>
</div>
</div><!--6-->
</div><!--bxCarrosel-->
</div> Estrutura Código CSS
Para conseguirmos um design mais atraente, vamos adicionar algumas propriedades CSS para as tags que foram colocadas na sessão HTML que usamos acima.
Portanto, você pode criar um arquivo style.css, coloque todo o código que se encontra logo mais abaixo.
Nesta seção, usaremos algumas propriedades CSS para estilizar o nosso Carrossel Vertical.
CSS
.box-carrossel {
width:100%;
overflow:hidden;
margin:auto;
background:#fff;
box-shadow: 1px 0px 1.2px 0px #e3e3e3;
border-radius:3px;
padding:0.6em;
}
.artigos-carrossel {
width:100%;
float:left;
display:inline-block;
padding: 8px;
border-bottom:1px #f2f2f2 solid;
}
.artigos-carrossel .imagem {
width:30%;
margin-right:3%;
float:left;
display:none;
}
.artigos-carrossel .imagem img {
width:100%;
height:100%;
border-radius:6px;
}
.artigos-carrossel .texto {
width:100%;
float:left;
}
.artigos-carrossel .texto p{
font-family: 'open_sanslight';
font-size:1em;
}
.artigos-carrossel .texto a {
text-decoration:none;
font-family: 'open_sansregular';
color:#00ced3;
font-size:0.9em;
transition:0.3s;
}
.artigos-carrossel .texto a:hover {
text-decoration:underline;
color:#343434;
}
/*Controle da Paginação carrossel*/
.bx-wrapper {
margin-top:0px !important;
}
.bx-controls {
width:100%;
float:left;
margin-top:10px;
}
.bx-controls-direction{
width: 100%;
float: left;
margin: auto;
border-top: 1px #e6e6e6 solid;
display: block;
padding-top: 10px;
}
.bx-prev {
width: 100px;
display: block;
background: #00bec4;
border-radius:3px;
color:#fff;
text-decoration:none;
float: left;
text-align: center;
padding:6px;
margin-right:8px;
}
.bx-next {
width: 100px;
display: block;
background: #00bec4;
border-radius:3px;
color:#fff;
text-decoration:none;
float: left;
text-align: center;
padding:6px;
}
.bx-prev:active, .bx-next:active { background-color:#343434; }
/*Controle da Paginação carrossel*/
/*Responsivo*/
/*768PX BREAKPOINT*/
@media (min-width:48em){
.box-carrossel { width:50%;}
.artigos-carrossel .imagem { display:block; }
.artigos-carrossel .texto { width:67%; }
} Nesta seção, vamos adicionar o script para dar o efeito Principal para o carrossel.
JavaScript
<script src="js/jquery.js"></script>
<script src="js/jquery.bxslider.js"></script>
<script>
//SLIDE BOX
$(function(){
$('.bxCarrosel').bxSlider({
mode: 'vertical',
minSlides: 3,
maxSlides: 3,
moveSlides: 1,
slideMargin: 6,
auto: true,
speed:800,
pager: false,
});
});
</script>Combinando as Três seções acima com Html e Css e Javascript temos o seguinte Resultado!
Veja o Resultado!
Baixar Código Veja Funcionando
Neste artigo, você aprendeu o passo a passo de como criar um Carrossel Responsivo Vertical com jquery. existem diversas formas de criar carrossel com efeitos, cores, formas e animações diferentes.
Fica o desafio para você tentar criar um novo design do zero a criatividade é sua.
faça um exemplo e comente aqui em baixo e deixe um link do seu desafio.
Deixe um comentário