Crear un loco doble slider con jQuery

martes, agosto 31, 2010
COMPARTE EL POST

slider

La ventajas que nos ofrece jQuery son muchas, de hecho no he encontrado alguna queja o algo malo de la gente que usa jQuery, la verdad es que es fascinante como cada día aparecen más plugins que agilizan nuestro trabajo y evitan que tardemos horas en crear algo cuando usando el plugin lo podemos hacer rápido.

Bueno, ese es el caso de dualSlider, un plugin jQuery con el que vamos a poder crear sliders dobles, esto quiere decir que por un lado vamos a tener un slider convencional en donde iremos pasando imágenes o vídeos, y en otro slider distinto vamos a estar mostrando un texto que se corresponde con la imagen activa. Después del salto vamos a ver como implementarlo en nuestro sitio web o blog, para ver el demos visiten la página de arriba para que se convenzan.

Implementación

Lo primero que tenemos que hacer es descargar el paquete y descomprimir, ahora, hay carpetas donde están los scripts y las hojas de estilos, entonces primero tenemos que enlazar todos ellos, recuerde que es dentro de la etiqueta <head>:

<link rel="stylesheet" type="text/css" media="all" href="css/reset.css" />
    <link rel="stylesheet" type="text/css" media="all" href="css/clearfix.css" />
    <link rel="stylesheet" type="text/css" media="all" href="css/style.css" />
    <link rel="stylesheet" type="text/css" media="all" href="css/fonts.css"  />
    <link rel="stylesheet" type="text/css" media="all" href="css/jquery.dualSlider.0.3.css" />

    <script src="scripts/jquery-1.3.2.min.js" type="text/javascript"></script>
    <script src="scripts/jquery.easing.1.3.js" type="text/javascript"></script>
    <script src="scripts/jquery.timers-1.2.js" type="text/javascript"></script>
    <script src="scripts/jquery.dualSlider.0.3.js" type="text/javascript"></script>

En este caso las hojas de estilos están en una carpeta llamada css/ y los scripts en scripts/ puedes cambiarles la dirección si quieres.

Ahora si, tenemos que crear nuestro script para configurar el doble slider:

<script type="text/javascript">
       
        $(document).ready(function() {
           
            $(".carousel").dualSlider({
                auto:true,
                autoDelay: 6000,
                easingCarousel: "swing",
                easingDetails: "easeOutBack",
                durationCarousel: 1000,
                durationDetails: 500
            });
           
        });
       
       
    </script>

Aquí le decimos a nuestro script que la capa que tenga el estilo “carousel” va a ser el doble slider, podemos ir modificando las propiedades con detenimiento pero primero vamos a hacer que funcione.

Ahora si, según el ejemplo, el siguiente código es el que se escribe para poder crear el doble slider, yo sugiero siempre que no modifiquen nombres de estilos o cosas similares, simplemente contenido. Entonces copiamos códigos más o menos así:

<div class="carousel clearfix">

            <div class="panel">
               
                <div class="details_wrapper">
                   
                    <div class="details">
                   
                        <div class="detail">
                            <h2 class="Lexia-Bold"><a href="#">Dolor sit amet</a> Cum sociis natoque penatibus et magnis dis parturient montes</h2>
                            <a href="#" title="Read more" class="more">Read more</a>
                        </div><!-- /detail -->
                       
                        <div class="detail">
                            <h2 class="Lexia-Bold"><a href="#">Lorem ipsum dolor</a> sit amet, consectetuer adipiscing elit. </h2>
                            <a href="#" title="Read more" class="more">Read more</a>
                        </div><!-- /detail -->
                       
                        <div class="detail">
                            <h2 class="Lexia-Bold"><a href="#">Aenean massa</a>. Cum sociis natoque penatibus et magnis dis parturient montes</h2>
                            <a href="#" title="Read more" class="more">Read more</a>
                        </div><!-- /detail -->
                       
                   
                    </div><!-- /details -->
                   
                </div><!-- /details_wrapper -->
               
                <div class="paging">
                    <div id="numbers"></div>
                    <a href="javascript:void(0);" class="previous" title="Previous" >Previous</a>
                    <a href="javascript:void(0);" class="next" title="Next">Next</a>
                </div><!-- /paging -->
               
                <a href="javascript:void(0);" class="play" title="Turn on autoplay">Play</a>
                <a href="javascript:void(0);" class="pause" title="Turn off autoplay">Pause</a>
               
            </div><!-- /panel -->
   
            <div class="backgrounds">
               
                <div class="item item_1">
                    <object width="604" height="340"><param name="allowfullscreen" value="true" /><param name="allowscriptaccess" value="always" /><param name="movie" value="http://vimeo.com/moogaloop.swf?clip_id=10930565&amp;server=vimeo.com&amp;show_title=0&amp;show_byline=0&amp;show_portrait=0&amp;color=ffffff&amp;fullscreen=1" /><embed src="http://vimeo.com/moogaloop.swf?clip_id=10930565&amp;server=vimeo.com&amp;show_title=0&amp;show_byline=0&amp;show_portrait=0&amp;color=ffffff&amp;fullscreen=1" type="application/x-shockwave-flash" allowfullscreen="true" allowscriptaccess="always" width="604" height="340" wmode="transparent"></embed></object>
                </div><!-- /item -->
               
                <div class="item item_2">
                    <object width="604" height="340"><param name="allowfullscreen" value="true" /><param name="allowscriptaccess" value="always" /><param name="movie" value=http://vimeo.com/moogaloop.swf?clip_id=12257932&amp;server=vimeo.com&amp;show_title=1&amp;show_byline=1&amp;show_portrait=0&amp;color=00ADEF&amp;fullscreen=1 /><embed src=http://vimeo.com/moogaloop.swf?clip_id=12257932&amp;server=vimeo.com&amp;show_title=1&amp;show_byline=1&amp;show_portrait=0&amp;color=00ADEF&amp;fullscreen=1 type="application/x-shockwave-flash" allowfullscreen="true" allowscriptaccess="always" width="604" height="340" wmode="transparent"></embed></object>
                </div><!-- /item -->
               
                <div class="item item_3">
                   
                </div><!-- /item -->
               
            </div><!-- /backgrounds -->
           
           
        </div>

Y ya tenemos nuestro doble slider listo, eso si,  como les dije, el código es el del ejemplo del sitio web, sólo tenemos que cambiar el código del contenido por elq ue queramos, eso ya es más fácil porque son códigos de vídeos y texto, y aunque parece que es muy difícil no lo es tanto.

¡Síguenos en Twitter!


Deja tu comentario