- Página Inicial
- Jquery
- Carrossel Responsivo Com Jquery
- Voltar
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.875 Visualizações
Deixe um comentário