Carrossel Responsivo Vertical com jquery

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:

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

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%; }

} 

Script:

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

Veja o Resultado!

Baixar Código Veja Funcionando