Carregando...
Desenvolvimento Web

Carrossel Responsivo Com Jquery

Postado: 15 de agosto de 2021 Tempo de Leitura: 3 Minutos

Carrossel Responsivo Com Jquery

Neste artigo vamos criar um Carrossel Responsivo com jquery.

bxslider é 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.. Características: Adaptar-se a qualquer dispositivo; Modos horizontais, verticais e desbotamento; Suporte avançado de toque / deslizamento embutido

Exemplos

Controle deslizante de conteúdo jQuery respsonsive. Codificado com ♥ por Steven

Opções

Elemento para usar como slides (ex. ‘div.slide’). Nota: por padrão, bxSlider usará todos os…

vamos adicionar o Html:

<!--Carrossel começa-->
<div class="bxCarrosel">

    <article class="blocoArtigo">
      
      <div class="mascara">
        <img src="uploads/1.jpg" title="Loop Nerd">
      </div>

      <div class="desc">  

        <time datetime="15/08/2021">Postado em: 15/08/2021</time>
        <h3>Listando Artigos com Carrossel Responsivo jquery - Bxslider</h3>
        <a href="#" class="btn fade_4S icon icon-coffee" title="Leia mais..."> Leia mais...</a>

      </div><!--desc-->

    </article>

    <article class="blocoArtigo">
      
      <div class="mascara">
        <img src="uploads/2.jpg" title="Loop Nerd">
      </div>

      <div class="desc">  

        <time datetime="15/08/2021">Postado em: 15/08/2021</time>
        <h3>Listando Artigos com Carrossel Responsivo jquery - Bxslider</h3>
        <a href="#" class="btn fade_4S icon icon-coffee" title="Leia mais..."> Leia mais...</a>

      </div><!--desc-->

    </article>

    <article class="blocoArtigo">
      
      <div class="mascara">
        <img src="uploads/3.jpg" title="Loop Nerd">
      </div>

      <div class="desc">  

        <time datetime="15/08/2021">Postado em: 15/08/2021</time>
        <h3>Listando Artigos com Carrossel Responsivo jquery - Bxslider</h3>
        <a href="#" class="btn fade_4S icon icon-coffee" title="Leia mais..."> Leia mais...</a>

      </div><!--desc-->

    </article>

    <article class="blocoArtigo">
      
      <div class="mascara">
        <img src="uploads/4.jpg" title="Loop Nerd">
      </div>

      <div class="desc">  

        <time datetime="15/08/2021">Postado em: 15/08/2021</time>
        <h3>Listando Artigos com Carrossel Responsivo jquery - Bxslider</h3>
        <a href="#" class="btn fade_4S icon icon-coffee" title="Leia mais..."> Leia mais...</a>

      </div><!--desc-->

    </article>

    <article class="blocoArtigo">
      
      <div class="mascara">
        <img src="uploads/5.jpg" title="Loop Nerd">
      </div>

      <div class="desc">  

        <time datetime="15/08/2021">Postado em: 15/08/2021</time>
        <h3>Listando Artigos com Carrossel Responsivo jquery - Bxslider</h3>
        <a href="#" class="btn fade_4S icon icon-coffee" title="Leia mais..."> Leia mais...</a>

      </div><!--desc-->

    </article>


</div>
<!--Carrossel Finaliza-->

Vamos Css do Controle do Carrossel:

/*Controle da Paginação carrossel*/
.boxSlide       { width:100%; overflow:hidden; margin:auto; }

.bx-wrapper     { float:left; position:relative; margin-bottom:0; padding:0; *zoom:1; -ms-touch-action:pan-y; touch-action:pan-y; }
.bx-wrapper img { max-width:100%; display:block; }
.bxslider       { margin:0; padding:0; -webkit-perspective:1000; /*fix flickering when used background-image instead of <img> (on Chrome)*/}
ul.bxslider     { list-style: none; }
.bx-viewport    { -webkit-transform: translateZ(0); float:left; height:100%!important; /* fix other elements on the page moving (in Chrome) */ }

.bx-wrapper { background-color:transparent; }
.bx-wrapper .bx-pager,
.bx-wrapper .bx-controls-auto  { width:100%; float:left; padding:0.3em 0em; }

.bx-wrapper .bx-loading { min-height:50px; background:url('images/bx_loader.gif') center center no-repeat #ffffff; height:100%; width:100%; position:absolute; top:0; left:0; z-index:2000; }

.bx-wrapper .bx-pager { text-align:center; font-size:.85em; font-family:Arial; font-weight:bold; color: #666; }
.bx-wrapper .bx-pager.bx-default-pager a { background:#d0d0d0; text-indent:-9999px; display:block; width:12px; height:12px; margin:0 5px; outline:0; -moz-border-radius:50%; -webkit-border-radius:50%; border-radius:50%; }
.bx-wrapper .bx-pager.bx-default-pager a:hover,
.bx-wrapper .bx-pager.bx-default-pager a.active,
.bx-wrapper .bx-pager.bx-default-pager a:focus { background:#4297cb; }
.bx-wrapper .bx-pager-item,
.bx-wrapper .bx-controls-auto .bx-controls-auto-item { display:inline-block; vertical-align:bottom; *zoom:1; *display:inline; }
.bx-wrapper .bx-pager-item { font-size:0; line-height:0; }

.bx-wrapper .bx-prev { left:10px; background: url('../images/controls.png') no-repeat 0 -32px; }
.bx-wrapper .bx-prev:hover,
.bx-wrapper .bx-prev:focus { background-position: 0 0; }
.bx-wrapper .bx-next { right:10px; background: url('../images/controls.png') no-repeat -43px -32px; }
.bx-wrapper .bx-next:hover,
.bx-wrapper .bx-next:focus { background-position: -43px 0; }
.bx-wrapper .bx-controls-direction a { position:absolute; top:50%; margin-top:-16px; outline:0;  width:32px; height:32px; text-indent:-9999px; z-index:1; }
.bx-wrapper .bx-controls-direction a.disabled { display:none;}

.bx-wrapper .bx-controls-auto { text-align:center; }
.bx-wrapper .bx-controls-auto .bx-start { display:block; text-indent:-9999px; width:10px; height:11px; outline:0; background: url('../images/controls.png') -86px -11px no-repeat; margin:0 3px; }
.bx-wrapper .bx-controls-auto .bx-start:hover,
.bx-wrapper .bx-controls-auto .bx-start.active,
.bx-wrapper .bx-controls-auto .bx-start:focus { background-position:-86px 0; }
.bx-wrapper .bx-controls-auto .bx-stop { display:block; text-indent:-9999px; width:9px; height:11px; outline:0; background:url('../images/controls.png') -86px -44px no-repeat; margin:0 3px; }
.bx-wrapper .bx-controls-auto .bx-stop:hover,
.bx-wrapper .bx-controls-auto .bx-stop.active,
.bx-wrapper .bx-controls-auto .bx-stop:focus { background-position:-86px -33px; }

.bx-wrapper .bx-controls.bx-has-controls-auto.bx-has-pager .bx-pager { text-align:left; width:80%; }
.bx-wrapper .bx-controls.bx-has-controls-auto.bx-has-pager .bx-controls-auto { right:0; width:35px; }

.bx-wrapper .bx-caption       { margin-top:1px;  background-color:#fff; width:100%; float:left; display: block; padding:10px; }
/*Controle da Paginação carrossel*/

Agora adicionar o CSS dos ARTIGOS:

obs: o width vai ficar em 100% porque o scritp vai controlar a quantidade dos itens no carrossel.

/*Lista Artigos*/
.blocoArtigo { 

    width:100%; 
    height:100%; 
    background-color:#fff;
    box-shadow:0px 1px 2px rgba(0,0,0,0.15); 
    margin-bottom:1.5em; 
    margin-right:0.1%; 
    float:left; 
    position:relative; 
    overflow:hidden; 
    transition:all 500ms; 
    -moz-transition:all 500ms; 
    -ms-transition:all 500ms; 
    -o-transition:all 500ms; 
    -webkit-transition:all 500ms;
}

.blocoArtigo .mascara { 

    overflow:hidden; 
    position:relative;
}

.blocoArtigo img  { 

    left:0%; 
    max-width:100%!important; 
    width:100%; 
    height:auto; 
    position:relative!important; 
    border:none!important; 
    display:block; 
}

.blocoArtigo .desc       { 
    
    background-color:transparent; 
    width:100%; 
    float: left; 
    padding:1em;
}

.blocoArtigo .desc  time { 

    width:100%; 
    float:left; 
    font-size:0.9em; 
    color:#00bec5; 
    font-family:'open_sansregular'; 
}

.blocoArtigo .desc h3    { 

    width:100%; 
    float:left; 
    font-family: 'open_sansregular'; 
    font-size: 1em; 
    color:#4d4d4d; 
    padding:0.4em 0em; 

}

.blocoArtigo .desc .btn       { 

    border:2px #00bec5 solid; 
    color:#00bec5; 
    transition:0.4s; 
    border-radius:50px; 
    font-family:'open_sansregular'; 
    padding:0.5em 0.8em; 
    display:block; 
    float:left; 
    text-decoration:none; 
}

.blocoArtigo .desc .btn:hover { border:2px #4d4d4d solid; color:#4d4d4d; }

Veja como ficou o nosso Carrossel Responsivo Com Jquery

Baixar Código Veja Funcionando

Publicado por: Loop Nerd

3.945 Visualizações

Deixe um comentário

O seu endereço de e-mail não será publicado. Campos obrigatórios são marcados com *

Artigos Relacionados