Slide Responsivo – jQuery Flex Slider

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