- Página Inicial
- Jquery
- Slide Responsivo – jQuery Flex Slider
- Voltar
Neste artigo vamos fazer um slide responsivo com jQuery Flex Slider.
FlexSlider é um plugin deslizante jQuery totalmente responsivo com marcação simples e semântica. Ele é suportado em todos os principais navegadores e vem com animações horizontais/verticais de slides e fade, suporte a vários slides, API callback e muito mais.
vamos adicionar o Html:
<div class="flexslider"> <ul class="slides"> <li> <img src="uploads/slider1.jpg" alt=""> <section class="flex-caption"> <p>Slide Responsivo</p> </section> </li> <li> <img src="uploads/slider2.jpg" alt=""> <section class="flex-caption"> <p>jQuery Flex Slider </p> </section> </li> <li> <img src="uploads/slider3.jpg" alt=""> <section class="flex-caption"> <p>Baixe o código</p> </section> </li> <li> <img src="uploads/slider4.jpg" alt=""> <section class="flex-caption"> <p>Loop Nerd</p> </section> </li> </ul> </div>
Vamos adicionar o css:
/*Slider*/ .flexslider { width:100%; position:relative; float:left;} .slides { overflow:hidden; } .slides img { width:100%; } .slides, .flex-control-nav, .flex-direction-nav { margin:0; padding:0; list-style:none; } .flex-control-nav { width:100%; text-align:center; position:absolute; bottom:5%; z-index:999; } .flex-control-nav li { display:inline-block; margin:0 6px; } .flex-control-nav li a { display:block; background:#ffffff; width:12px; height:12px; text-indent:-9999px; } .flex-control-nav li a:hover { background: #00ABFF;} .flex-control-nav li a.flex-active{ background:#00ABFF; } .flex-direction-nav a{ display:block; text-decoration:none; position:absolute; top:40%; z-index:999; text-align:center; width:100px; height:100px; line-height:100px; color:#ffffff; font-size:1.5em; overflow:hidden; opacity:0; -webkit-transition: all 0.3s ease-in-out; -moz-transition: all 0.3s ease-in-out; -ms-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; } .flex-direction-nav .flex-prev { left:0; } .flex-direction-nav .flex-next { right:0; } .flex-caption p { font-family:Lato; position:absolute; top:45%; text-align:center; width:100%; font-size:1em; color:#fff; font-weight:bold; } .flexslider:hover .flex-direction-nav .flex-prev { opacity: 100; left: 20px;} .flexslider:hover .flex-direction-nav .flex-prev:hover { opacity: 10;} .flexslider:hover .flex-direction-nav .flex-next { opacity: 100; right: 20px;} .flexslider:hover .flex-direction-nav .flex-next:hover { opacity: 10;} /*Slider*/ /*Responsivo*/ /*768PX BREAKPOINT*/ @media (min-width:48em){ .flex-direction-nav a { font-size:2em; } .flex-caption p { top:50%; font-size:2.5em; } }
Vamos adicionar o Script:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script> <script src="js/jquery.flexslider.js"></script> <script type="text/javascript"> $(window).load(function() { $('.flexslider').flexslider({ //animation: "lefet", animation: "fade", touch: true, pauseOnAction: false, pauseOnHover: false, slideshowSpeed: 7000, animationSpeed: 1000, prevText: '<icon class="icon icon-arrow-left">', nextText: '<icon class="icon icon-arrow-right">', }); }); </script>
Veja o Resultado!
Baixar Código Veja Funcionando
Publicado por: Loop Nerd
1.769 Visualizações
Deixe um comentário