06 mayo 2016

Como Hacer un Slider de Imagenes y Texto en Jquery y CSS

5/06/2016   Codigos Taz   0 comentarios

Como Hacer un Slider de Imagenes y Texto en Jquery y CSS
En este post aprenderemos a hacer un Slider de Imagenes con Texto con Jquery y CSS Para ello utilizaremos el Plugin de SliderJS Para empezar debemos tener la siguiente estructura en HTML: 

<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Ejemplo Slider</title>
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
        <script src="http://www.jose-aguilar.com/scripts/jquery/slidesjs/examples/images-with-captions/js/slides.min.jquery.js"></script>
    </head>
    <body>
        <div id="slides">
            <div class="slides_container">
                <div class="slide">
                    <a href="#" > 
                        <img src="http://www.buenosaires.gob.ar/sites/gcaba/files/baires_8_0.jpg" >
                    </a>
                    <div class="caption">
                        <p>Texto del Slide #1</p>
                    </div>
                </div>
                <div class="slide">
                    <a href="#">
                        <img src="http://media-cdn.tripadvisor.com/media/photo-s/00/1c/80/01/tokyo-tower-from-roppongi.jpg" >
                    </a>
                    <div class="caption">
                        <p>Texto del Slide #2</p>
                    </div>
                </div>                  
                <div class="slide">
                    <a href="#">
                        <img src="http://www.cruceroclick.com/admin/archivos/Image/PAISAJES/POLINESIA/Tranquil_Lagoon_Bora_Bora_Island_French_Polynesia.jpg">
                    </a>
                    <div class="caption">
                        <p>Texto del Slide #3</p>
                    </div>
                </div>
            </div>

            <a href="#" class="prev"><img src="https://cdn3.iconfinder.com/data/icons/faticons/32/arrow-left-01-32.png" alt="Arrow Prev"></a>
            <a href="#" class="next"><img src="https://cdn3.iconfinder.com/data/icons/faticons/32/arrow-right-01-32.png"  alt="Arrow Next"></a>
      
        </div>
    </body>
</html>


El codigo CSS es como se muestra : 

#slides {
        margin:0 auto;
        position: relative;
    }
    .slides_container {
        margin:0 auto;
        width:580px;
        height: 280px;
        overflow:hidden;
        position:relative;
    }
    .slides_container .slide {
        width:580px;
        height: 280px;
        display:block;
    }

    #slides .next, #slides .prev {
        position: absolute;
        top:107px;
        width:24px;
        height:24px;
        display:block;
        z-index:101;
    }
    #slides .next {
        right:300px;
    }
    #slides .prev {
        left:300px;
    }
    .pagination {
        margin:26px auto 0;
        width:100px;
    }

    .pagination li {
        float:left;
        margin:0 1px;
        list-style:none;
    }
    .pagination li a {
        display:block;
        width:12px;
        height:0;
        padding-top:12px;
        background-image:url('http://i.imgur.com/VRdGEDj.png');
        background-position:0 0;
        float:left;
        overflow:hidden;
    }
    .pagination li.current a {
        background-position:0 -12px;
    }
    .caption {
        z-index:500;
        position:absolute;
        bottom:-15px;
        left:0;
        height:50px;
        padding:5px 20px 0 20px;
        background:#000;
        background:rgba(0,0,0,.5);
        width:540px;
        font-size:1.3em;
        line-height:1.33;
        color:#fff;
        border-top:1px solid #000;
        text-shadow:none;
    }


El codigo en Jquery es como se muestra 

$(function(){
                $('#slides').slides({
                    play: 5000,
                    pause: 2500,
                    hoverPause: true,
                    animationStart: function(current){
                        $('.caption').animate({
                            bottom:-15
                        },100);
                        if (window.console && console.log) {
                            console.log('animationStart on slide: ', current);
                        };
                    },
                    animationComplete: function(current){
                        $('.caption').animate({
                            bottom:0
                        },200);
                        if (window.console && console.log) {
                            console.log('animationComplete on slide: ', current);
                        };
                    },
                    slidesLoaded: function() {
                        $('.caption').animate({
                            bottom:0
                        },200);
                    }
                });
            });


Puedes ver DEMO AQUI
-->

0 comentarios :

▼▲ Mostrar / Ocultar comentarios

Publicar un comentario

Deja tus comentarios respecto al contenido de este post

Búsqueda avanzada