Sencillo y práctico slider de imágenes con jQuery

  Escrito por Lautarorx            El 19 de febrero de 2012


Un slider siempre es un elemento que transformá a tu sitio y lo hace mucho más vistoso. Ya les he mostrado uno que combinaba imágenes y contenido, esta vez lo transformé y lo convertí en uno sencillo y agradable. Este nuevo diseño permite poner imágenes o banners con enlaces a los artículos que ustedes quieran destacar o mostrar.

Este slider usa jQuery, he estado probando varios que me trajeron muchos dolores de cabezapor la incompatibilidad entre las versiones de esta librería. Es fácil de editar y poner a su gusto, no debería traer demasiados problemas su inplementación ya que yo mismo lo tengo en el blog y no se mostró nada caprichoso.

PASO 1: HTML

Aquí tenemos a la estructura de nuestro slider donde pondremos los banners y enlaces a las diferentes entradas. Podemos ubicar este código en la sección de entradas justo debajo de la etiqueta <div id='main-wrapper'>. Noten que deben cambiar los valores de height y width según el alto y ancho de la imágen respectivametne.
<div id='wrappera'>
 <div id='slider'>
  <div class='inslider'>
    <!-- Content holder will hold content -->
    <div class='contentholder'>
     <div class='contentslider'>

      <div class='contenta'>
        <center><a href='URL DE LA ENTRADA' title='TÍTULO DE LA ENTRADA'><img height='238px' src='URL DE LA IMÁGEN' width='490px'/></a></center>
      </div>
      <div class='contenta'>
        <center><a href='URL DE LA ENTRADA' title='TÍTULO DE LA ENTRADA'><img height='238px' src='URL DE LA IMÁGEN' width='490px'/></a></center>
      </div>
      <div class='contenta'>
        <center><a href='URL DE LA ENTRADA' title='TÍTULO DE LA ENTRADA'><img height='238px' src='URL DE LA IMÁGEN' width='490px'/></a></center>
      </div>
      <div class='contenta'>
        <center><a href='URL DE LA ENTRADA' title='TÍTULO DE LA ENTRADA'><img height='238px' src='URL DE LA IMÁGEN' width='490px'/></a></center>
      </div>
   </div>
   </div>

<!-- Navigation for content slider -->
        <div class='contentnav'>
          <a href='#' rel='1'><img src='https://lh5.googleusercontent.com/-jwHUBGJqE5c/Tz642cyZUHI/AAAAAAAABuE/AjWtMTzVi3w/s31/1.png'/></a>
          <a href='#' rel='2'><img src='https://lh4.googleusercontent.com/-OsZCHI6B8qs/Tz64pGxVxBI/AAAAAAAABt4/OhBjbgXtmzQ/s31/2.png'/></a>
          <a href='#' rel='3'><img src='https://lh4.googleusercontent.com/-YhQHisoD0bI/Tz64btCnhKI/AAAAAAAABts/UXU-thKkYyM/s31/3.png'/></a>
          <a href='#' rel='4'><img src='https://lh6.googleusercontent.com/-qMViYctrWi4/Tz64H9KUxgI/AAAAAAAABtg/3VwLMUIN_zs/s31/4.png'/></a>
      </div>
    </div>
   </div>
 </div>
PASO 2: CSS

Tendrán que colocar los siguientes estilos antes de la etiqueta ]]></b:skin>. No hay mucho para cambiar así que les recomiendo que no cambien nada.

/* Slider
----------------------------------------------- */
#wrappera {
width:560px;
margin-left:auto;
margin-right:auto;
        margin-top: 19px;
overflow:visible;
}

#slider {
position:relative;
padding:20px;
overflow:hidden;
}
.contenta {
width:520px;
float: left;
position: relative;
}
.inslider a {
text-decoration:none;
}
.contentholder {
height:250px;
width: 520px;
overflow: hidden;
position: relative;
}
.contentslider {
position: absolute;
top: 0; left: 0;
}
.imgslider img {
float: left;
}
.contentnav {
position: absolute;
        bottom: 30px; left:200px;
height:30px;
z-index: 100;
text-align: center;
line-height: 30px;
}
PASO 3: JAVASCRIPT

Justo después de <head> peguen este script para la configuración del slider. Pueden modificar la velocidad del slider cambiando el número 5000 por el que deseen (1000 = 1 seg.).
<script>
$(document).ready(function() {
//Activate First Link
$(&quot;.contentnav a:first&quot;).addClass(&quot;active&quot;);
//width of a single content area
var contentwidth = $(&quot;.contentholder&quot;).width();
//Total number of content
var totalcontent = $(&quot;.contenta&quot;).size();
//Total width of all content area
var allcontentwidth = contentwidth * totalcontent;
//contentslider to new size which we got in above step
$(&quot;.contentslider&quot;).css({&#39;width&#39; : allcontentwidth});
//Now right a new function for slide and slide navigation
rotate = function(){
//Number of times we need to slide
var slideid = $active.attr(&quot;rel&quot;) - 1;
//Set the distance which single content needs to slide
var slidedistance = slideid * contentwidth;
//Remove active class
$(&quot;.contentnav a&quot;).removeClass(&#39;active&#39;);
//Add Active Class
$active.addClass(&#39;active&#39;);
//Slider Animation
$(&quot;.contentslider&quot;).animate({
        left: -slidedistance
    }, 500 );
};

//Set Time for Rotation of slide
rotation = function(){
play = setInterval(function(){
//Next slide nav
$active = $(&#39;.contentnav a.active&#39;).next();
if ( $active.length === 0) {
//Move to first slide nav
$active = $(&#39;.contentnav a:first&#39;);
}
rotate();
//Timer speed 5 sec
}, 5000);
};
//Run rotation fuction
rotation();
$(&quot;.contentnav a&quot;).click(function() {
$active = $(this);
clearInterval(play);
rotate();
rotation();
return false;
});
});

</script>
PASO 4: JQUERY

Finalmente, para que todo esto funcione deben tener instalada la librería jQuery. Si no la tienen les dejaré el script para que lo peguen justo debajo del anterior. Pueden revisar un poco más este tema en esta entrada.
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js' type='text/javascript'/>

El contendio de esta entrada esta protegido bajo Derechos de Autor y leyes de Copyright. Su reproducción PARCIAL O TOTAL sin mencionar la fuente esta penada por la Ley 11.723 y la DMCA vigente en EE.UU. Todo el contenido está bajo licencia de Creative Commons.

Related Posts Plugin for WordPress, Blogger...


New Games + Hacks | Diseñado por Lautaro Rodríguez Xavier

© Informatics 2011-2012 | Se recomienda el uso de Mozilla Firefox