Slide Responsivo Com Jquery – Bxslider

Slide Responsivo Com Jquery – Bxslider

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…

com poucas linhas de códigos é possivel criar um slide 100% responsivo.

Vamos iniciar com Html:

<ul class="bxslider">

    <li>
        <img src="uploads/1.jpg" alt="ingles" title="Curso de Inglês Online.">   
    </li>
  
    <li>

        <img src="uploads/2.jpg" title="Quer Aprender a fala Inglês.">   
        <div class="bx-caption">
            
            <h1 class="branco icon icon-coffee"> Aprenda<br> <b class="destaqueAzul branco">CSS3</b> Acompanhe</h1>
             <span class="branco"> O Blog Loop Nerd</span>
            <a href="https://www.loopnerd.com.br/category/codigos-pronto/css/" target="_blank" class="veja" title="Saiba mais">Saiba mais</a>
       
        </div> 

    </li>

    <li>
        <img src="uploads/3.jpg" title="Matrículas Abertas">   
        <div class="bx-caption">
     
            <h1 class="branco icon icon-code"> Artigos Sobre<b class="destaqueLaranja preto"> HTML5</b></h1>
             <span class="branco"> Um Guia Completo.</span>
            <a href="#" target="_blank" class="veja" title="Saiba mais">Saiba mais</a>

        </div> 
    </li>

    <li>

        <img src="uploads/4.jpg" title="Agora Ficou Fácil Aprender Ingles.">   
        <div class="bx-caption">
            
            <h1 class="preto icon icon-twitter"> Siga <br> <b class="destaqueAzul branco">Twitter</b> !</h1>
             <span class="preto"> @loopnerd</span>
            <a href="#" target="_blank" class="veja" title="Saiba mais">Saiba mais</a>
       
        </div> 

    </li>

</ul><!--Fecha bxslider-->

Agora adicionamos o Css:

Observem as chamada de classes no html para as cores.

você pode adicionar mais classes e cores de acordo com seu layout e imagem.

/*Chamada classes para as cores*/

.azul     { color:#296aa6; }
.branco   { color:#fff; }
.laranja  { color:#e54d26; }
.preto    { color:#000000; }

/*Modulo Slide*/
.boxSlide         { background-color:#e5e5e5; }

.bx-wrapper     { position:relative; margin-bottom:60px; 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); /* fix other elements on the page moving (in Chrome) */ }

.bx-wrapper { background-color:#fff; }
.bx-wrapper .bx-pager,
.bx-wrapper .bx-controls-auto  { position: absolute; bottom:-30px; width:100%; }

.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:#232323; text-indent:-9999px; display:block; width:10px; height:10px; 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: #5ad7dc; }
.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       { position:absolute; top:48%; margin-top:-48px; left:0; width:100%; padding:10px; }
.bx-wrapper .bx-caption h1    { font-family:'open_sansbold'; display:block; text-align:center; font-size:1em; margin-bottom:0.2em; }
.bx-wrapper .bx-caption h1 b  { font-family:'open_sansregular'; }

/*Chamada classes para as cores*/
.azul     { color:#296aa6; }
.branco   { color:#fff; }
.laranja  { color:#e54d26; }
.preto    { color:#000000; }

.bx-wrapper .bx-caption h1 b.destaqueAzul     { background:rgba(3,144,232,100); padding:0 0.2em; }
.bx-wrapper .bx-caption h1 b.destaqueBranco   { background:rgba(255,255,255,100); padding:0 0.2em; }
.bx-wrapper .bx-caption h1 b.destaqueLaranja  { background:rgba(229,77,38,100); padding:0 0.2em; }
.bx-wrapper .bx-caption h1 b.destaquePreto    { background:rgba(0,0,0,100); padding:0 0.2em; }

.bx-wrapper .bx-caption span  { font-family:'open_sanslight'; display:block; text-align:center; font-size:0.8em; margin-bottom:0.2em; }
.bx-wrapper .bx-caption .veja { width:100px; padding:0.2em; background-color:#b20911; color:#fff; border-radius:3px; font-size:0.7em; display:inherit; text-decoration:none; margin:auto; text-align:center; }
/*Modulo Slide*/

Vamos Adicionar o Script para fazer o efeito do slide.

Não se preocupem eu vou deixar para download todo o código + scripts.

<script src="js/jquery.js"></script>
<script src="js/jquery.bxslider.js"></script>
<script>

//SLIDE BOX
$(function(){
    
      $('.bxslider').bxSlider({
        
        mode: 'horizontal',
        swipeThreshold:true,
        touchEnabled:true,
        oneToOneTouch:true,
        auto: true,
        controls:true,
        infiniteLoop: true,
        autoHover:true,
        speed:1500
      
      });

}); 
</script>

Visitem o site do bxslider veja mais configurações dos controles do script.

Vejam o resultado!

Baixar Código Veja Funcionando