Tecnología y Coaching para Emprendedores

Fantástico Slider de Imágenes con jQuery y CSS3

jquery

Hoy te traemos un slider de imágenes hecho con jQuery por Andrey Prikaznov. Este slider de imágenes está hecho en base a un modelo de celdas y trae incorporado tres tipos de efectos: deslizamiento de las imágenes de abajo arriba, lo mismo pero de derecha a izquierda, y aparición de las imágenes desde el fondo con efectos de transición.

Para poder visualizar correctamente el slider, es necesario que el navegador soporte CSS3, ya que muchas de las funcionalidades están implementadas con las técnicas de CSS3, como sería la transición de las imágenes. Para otros sliders de imágenes con jQuery, te recomiendo el artículo 35 jQuery Slider Plugins y Tutoriales, también disponible en este blog.

Ver la demoDescargar archivos

Paso 1. Código HTML5

Lo primero de todo, vamos a ver el código HTML5. En este slider aparecen 5 imágenes. Si no entiendes el código, no te preocupes, enseguida lo explico.
index.html

<!DOCTYPE html>
<html lang="en" >
    <head>
        <meta charset="utf-8" />
        <title>Fantástico Slider de Imágenes con jQuery y CSS3</title>
        <link href="css/main.css" rel="stylesheet" type="text/css" />

        <!--[if lt IE 9]>
          &lt;script src=&quot;http://html5shiv.googlecode.com/svn/trunk/html5.<a href="http://www.esandra.com/out/javascript" title="Libro Murach&#039;s JavaScript" class="pretty-link-keyword" target="_blank">js</a>&quot;&gt;
          &lt;/script&gt;
        &lt;![endif]--&gt;
        &lt;script src=&quot;http://code.jquery.com/jquery-latest.min.js&quot;&gt;&lt;/script&gt;
        &lt;script src=&quot;js/main.js&quot;&gt;&lt;/script&gt;
    &lt;/head&gt;
    &lt;body&gt;
        &lt;div class=&quot;container&quot; id=&quot;container&quot;&gt;
            &lt;ul class=&quot;nav&quot;&gt;
                &lt;li id=&quot;m1&quot;&gt;Pic 1&lt;/li&gt;
                &lt;li id=&quot;m2&quot;&gt;Pic 2&lt;/li&gt;
                &lt;li id=&quot;m3&quot;&gt;Pic 3&lt;/li&gt;
                &lt;li id=&quot;m4&quot;&gt;Pic 4&lt;/li&gt;
                &lt;li id=&quot;m5&quot;&gt;Pic 5&lt;/li&gt;
            &lt;/ul&gt;

            &lt;ul class=&quot;grid&quot;&gt;
                &lt;li id=&quot;g1&quot;&gt;
                    &lt;div class=&quot;d1&quot;&gt;&lt;/div&gt;
                    &lt;div class=&quot;d2&quot;&gt;&lt;/div&gt;
                    &lt;div class=&quot;d3&quot;&gt;&lt;/div&gt;
                    &lt;div class=&quot;d4&quot;&gt;&lt;/div&gt;
                    &lt;div class=&quot;d5&quot;&gt;&lt;/div&gt;
                &lt;/li&gt;
                &lt;li id=&quot;g2&quot;&gt;
                    &lt;div class=&quot;d1&quot;&gt;&lt;/div&gt;
                    &lt;div class=&quot;d2&quot;&gt;&lt;/div&gt;
                    &lt;div class=&quot;d3&quot;&gt;&lt;/div&gt;
                    &lt;div class=&quot;d4&quot;&gt;&lt;/div&gt;
                    &lt;div class=&quot;d5&quot;&gt;&lt;/div&gt;
                &lt;/li&gt;
                &lt;li id=&quot;g3&quot;&gt;
                    &lt;div class=&quot;d1&quot;&gt;&lt;/div&gt;
                    &lt;div class=&quot;d2&quot;&gt;&lt;/div&gt;
                    &lt;div class=&quot;d3&quot;&gt;&lt;/div&gt;
                    &lt;div class=&quot;d4&quot;&gt;&lt;/div&gt;
                    &lt;div class=&quot;d5&quot;&gt;&lt;/div&gt;
                &lt;/li&gt;
                &lt;li id=&quot;g4&quot;&gt;
                    &lt;div class=&quot;d1&quot;&gt;&lt;/div&gt;
                    &lt;div class=&quot;d2&quot;&gt;&lt;/div&gt;
                    &lt;div class=&quot;d3&quot;&gt;&lt;/div&gt;
                    &lt;div class=&quot;d4&quot;&gt;&lt;/div&gt;
                    &lt;div class=&quot;d5&quot;&gt;&lt;/div&gt;
                &lt;/li&gt;
                &lt;li id=&quot;g5&quot;&gt;
                    &lt;div class=&quot;d1&quot;&gt;&lt;/div&gt;
                    &lt;div class=&quot;d2&quot;&gt;&lt;/div&gt;
                    &lt;div class=&quot;d3&quot;&gt;&lt;/div&gt;
                    &lt;div class=&quot;d4&quot;&gt;&lt;/div&gt;
                    &lt;div class=&quot;d5&quot;&gt;&lt;/div&gt;
                &lt;/li&gt;
                &lt;li id=&quot;g6&quot;&gt;
                    &lt;div class=&quot;d1&quot;&gt;&lt;/div&gt;
                    &lt;div class=&quot;d2&quot;&gt;&lt;/div&gt;
                    &lt;div class=&quot;d3&quot;&gt;&lt;/div&gt;
                    &lt;div class=&quot;d4&quot;&gt;&lt;/div&gt;
                    &lt;div class=&quot;d5&quot;&gt;&lt;/div&gt;
                &lt;/li&gt;
            &lt;/ul&gt;
            &lt;ul class=&quot;demos&quot;&gt;
                &lt;li&gt;&lt;a rel=&quot;nofollow&quot; href=&quot;index.html&quot;&gt;Demo 1&lt;/a&gt;&lt;/li&gt;
                &lt;li&gt;&lt;a rel=&quot;nofollow&quot; href=&quot;index2.html&quot;&gt;Demo 2&lt;/a&gt;&lt;/li&gt;
                &lt;li&gt;&lt;a rel=&quot;nofollow&quot; href=&quot;index3.html&quot;&gt;Demo 3&lt;/a&gt;&lt;/li&gt;
            &lt;/ul&gt;
        &lt;/div&gt;
        &lt;footer&gt;
            &lt;h2&gt;Fantástico Slider de Imágenes con jQuery y CSS3&lt;/h2&gt;
        &lt;/footer&gt;
    &lt;/body&gt;
&lt;/html&gt;

Paso 2. Código CSS & CSS3

A continuación vemos el código CSS con las funcionalidades de CSS3.
css/main.css

.nav {
    background-color:#DDD;
    list-style:none outside none;
    overflow:hidden;
    padding:5px 140px;
}
.nav li {
    border-radius:10px;
    -moz-border-radius:10px;
    -webkit-border-radius:10px;

    border:2px outset #000000;
    color:#000;
    cursor:pointer;
    float:left;
    font-size:18px;
    font-weight:bold;
    margin-right:5px;
    padding:10px;
}

.demos {
    background-color:#DDD;
    list-style:none outside none;
    overflow:hidden;
    padding:5px 165px;
}
.demos li {
    border-radius:10px;
    -moz-border-radius:10px;
    -webkit-border-radius:10px;

    border:2px outset #000000;
    color:#000;
    float:left;
    font-size:18px;
    font-weight:bold;
    margin-right:5px;
    padding:10px;
}
.demos li a {
    color:#000;
    cursor:pointer;
    display:block;
    font-size:20px;
    font-weight:bold;
    height:30px;
    line-height:30px;
    text-decoration:none;
}

.grid {
    background-color:#DDD;
    list-style:none outside none;
    width:100%;
}
.grid li {
    border:1px solid #777777;
    float:left;
    height:240px;
    width:211px;

    transition:all 0.5s linear;
    -moz-transition:all 0.5s linear;
    -o-transition:all 0.5s linear;
    -webkit-transition:all 0.5s linear;
}
.grid li div {
    transition:all 0.5s ease-in-out;
    -moz-transition:all 0.5s ease-in-out;
    -o-transition:all 0.5s ease-in-out;
    -webkit-transition:all 0.5s ease-in-out;

    float:left;
}
.grid li .d1 {
    background:transparent url(../images/grid1.jpg) no-repeat top left;
    height:100%;
    width:211px;
}
.grid li .d2 {
    background:transparent url(../images/grid2.jpg) no-repeat top left;
    height:100%;
    width:0;
}
.grid li .d3 {
    background:transparent url(../images/grid3.jpg) no-repeat top left;
    height:100%;
    width:0;
}
.grid li .d4 {
    background:transparent url(../images/grid4.jpg) no-repeat top left;
    height:100%;
    width:0;
}
.grid li .d5 {
    background:transparent url(../images/grid5.jpg) no-repeat top left;
    height:100%;
    width:0;
}
.grid li#g2 div {
    background-position:-211px 0;
}
.grid li#g3 div {
    background-position:-422px 0;
}
.grid li#g4 div {
    background-position:0 -240px;
}
.grid li#g5 div {
    background-position:-211px -240px;
}
.grid li#g6 div {
    background-position:-422px -240px;
}

De entrada, parece complicado, pero es muy simple. Hay cinco imágenes, grid1.jpg, grid2.jpg, ..., grid5.jpg. Cada una de estas imágenes está almacenada en la clase d1, d2...,d5 respectivamente. La imágen se divide en 6 celdas, y cada una de estas celdas está guardada en los id g1, g2,..,g6. Si queremos trabajar con imágenes más grandes, tendremos que modificar la parte del CSS que define la posición de las celdas:

}
.grid li#g2 div {
    background-position:-211px 0;
}
.grid li#g3 div {
    background-position:-422px 0;
}
.grid li#g4 div {
    background-position:0 -240px;
}
.grid li#g5 div {
    background-position:-211px -240px;
}
.grid li#g6 div {
    background-position:-422px -240px;
}

Paso 3. jQuery

Finalmente, el código de jQuery para animar las transiciones.

js/main.js

$(function(){
    $(".nav li").hover(
      function () {
        $('.grid li div').stop().animate({width:"0"},0);

        var ind = $(".nav li").index(this);
        $($('.grid li#g1 div')[ind]).stop().animate({width:"211px"},0);
        $($('.grid li#g2 div')[ind]).stop().animate({width:"211px"},50);
        $($('.grid li#g3 div')[ind]).stop().animate({width:"211px"},100);
        $($('.grid li#g4 div')[ind]).stop().animate({width:"211px"},150);
        $($('.grid li#g5 div')[ind]).stop().animate({width:"211px"},200);
        $($('.grid li#g6 div')[ind]).stop().animate({width:"211px"},250);
      }
    );
});

Ver la demoDescargar archivos

¿Qué te ha parecido? Deja un comentario.