Como hacer un slider con jQuery

  Escrito por Lautarorx            El 13 de diciembre de 2011


Un slider siempre es una excelente opción para que tus visitantes tengan una mejor visualización de los contenidos más importantes de tu sitio Web. A continuación les mostraré como hacer uno igual al que tengo en Informatics. También le podemos dar algo más de organización a nuestro sitio y contenido del mismo. Sin más que decir les pongo paso a paso como lograr tener uno:


PASO 1: jQuery

En este paso deberemos poner el script  para que nuestro slider funcione, para eso vamos a Plantilla > Edición de HTML (en la interfaz actualizada de blogger). Recomiendo antes que nada hacer un back up de la plantilla, luego expandimos las plantillas de artilugios y buscan <head> debajo pegan estos códigos:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js" type="text/javascript"><!--mce:0--></script>

<script>
$(document).ready(function() {
//Activate First Link
$(".contentnav a:first").addClass("active");
//width of a single content area
var contentwidth = $(".contentholder").width();
//Total number of content
var totalcontent = $(".contenta").size();
//Total width of all content area
var allcontentwidth = contentwidth * totalcontent;
//contentslider to new size which we got in above step
$(".contentslider").css({'width' : allcontentwidth});
//Now right a new function for slide and slide navigation
rotate = function(){
//Number of times we need to slide
var slideid = $active.attr("rel") - 1;
//Set the distance which single content needs to slide
var slidedistance = slideid * contentwidth;
//Remove active class
$(".contentnav a").removeClass('active');
//Add Active Class
$active.addClass('active');
//Slider Animation
$(".contentslider").animate({
        left: -slidedistance
    }, 500 );
};

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


</script>

PASO 2: HTML

Ahora añadimos un widget en Blogger de Javascript/HTML o si desean que aparezca tal como en el blog buscamos la etiqueta <div id='main-wrapper'> y debajo de ella pegamos lo siguiente:

<div id='wrappera'>
 <div id='slider'>
  <div class='inslider'>
    <!-- Content holder will hold content -->
    <div class='contentholder'>
     <div class='contentslider'>

      <div class='contenta'>
<a href='URL DE LA ENTRADA'><img class='gradualfader' height='176' src='https://fbcdn-profile-a.akamaihd.net/hprofile-ak-snc4/373353_265566123479513_2128645229_n.jpg' style='float:left; margin-right:10px; -moz-border-radius: 7px;-webkit-border-radius: 7px;margin-bottom:20px' width='176'/></a>
<h2 style='margin-top:-5px'>
<a href='URL DE LA ENTRADA'><span class='Apple-style-span' id='tituloentr' style='color: white; font-family: 'Trebuchet MS', sans-serif;'>
Lorem ipsum dolor sit amet</span></a></h2>

<p style='margin-top:-5px'>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Ut odio. Nam sed est. Nam a risus et est iaculis adipiscing. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Integer ut justo. In tincidunt viverra nisl. Donec dictum malesuada magna. Curabitur id nibh auctor tellus adipiscing pharetra. Fusce vel justo non orci semper feugiat. Cras eu leo at purus ultrices tristique.</p>
</div>
      <div class='contenta'>
<a href='URL DE LA ENTRADA'><img class='gradualfader' height='176' src='https://fbcdn-profile-a.akamaihd.net/hprofile-ak-snc4/373353_265566123479513_2128645229_n.jpg' style='float:left; margin-right:10px; -moz-border-radius: 7px; -webkit-border-radius: 7px;margin-bottom:20px' width='176'/></a>
<h2 style='margin-top:-5px'>
<a href='http://elecasoft.blogspot.com/2011/12/la-nueva-generacion-de-intel-ivy-bridge.html'><span class='Apple-style-span' id='tituloentr' style='color: white; font-family: 'Trebuchet MS', sans-serif;'>
Lorem ipsum dolor sit amet</span></a></h2>

<p style='margin-top:-5px'>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Ut odio. Nam sed est. Nam a risus et est iaculis adipiscing. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Integer ut justo. In tincidunt viverra nisl. Donec dictum malesuada magna. Curabitur id nibh auctor tellus adipiscing pharetra. Fusce vel justo non orci semper feugiat. Cras eu leo at purus ultrices tristique. </p>
</div>
    
 
          <div class='contenta'>
<a href='URL DE LA ENTRADA'><img class='gradualfader' height='176' src='https://fbcdn-profile-a.akamaihd.net/hprofile-ak-snc4/373353_265566123479513_2128645229_n.jpg' style='float:left; margin-right:10px;-moz-border-radius: 7px; -webkit-border-radius: 7px; margin-bottom:20px' width='176'/></a>
<h2 style='margin-top:-5px'>
<a href='http://elecasoft.blogspot.com/2011/12/los-10-programas-escenciales-que-debes.html'><span class='Apple-style-span' id='tituloentr' style='color: white; font-family: 'Trebuchet MS', sans-serif;'>
Lorem ipsum dolor sit amet</span></a></h2>

<p style='margin-top:-5px'>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Ut odio. Nam sed est. Nam a risus et est iaculis adipiscing. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Integer ut justo. In tincidunt viverra nisl. Donec dictum malesuada magna. Curabitur id nibh auctor tellus adipiscing pharetra. Fusce vel justo non orci semper feugiat. Cras eu leo at purus ultrices tristique. </p>
</div>

  <div class='contenta'>
<a href='URL DE LA ENTRADA'><img class='gradualfader' height='176' src='https://fbcdn-profile-a.akamaihd.net/hprofile-ak-snc4/373353_265566123479513_2128645229_n.jpg' style='float:left; margin-right:10px;-moz-border-radius: 7px; -webkit-border-radius: 7px; margin-bottom:20px' width='176'/></a>
<h2 style='margin-top:-5px'>
<a href='URL DE LA ENTRADA'><span class='Apple-style-span' id='tituloentr' style='color: white; font-family: 'Trebuchet MS', sans-serif;'>
Lorem ipsum dolor sit amet</span></a></h2>

<p style='margin-top:-5px'>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Ut odio. Nam sed est. Nam a risus et est iaculis adipiscing. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Integer ut justo. In tincidunt viverra nisl. Donec dictum malesuada magna. Curabitur id nibh auctor tellus adipiscing pharetra. Fusce vel justo non orci semper feugiat. Cras eu leo at purus ultrices tristique.</p>
</div>

   </div>
   </div>

<!-- Navigation for content slider -->
      <div class='contentnav'>
          <a href='#' rel='1'><span style='color: white;'><b>1</b></span></a>
          <a href='#' rel='2'><span style='color: white;'><b>2</b></span></a>
          <a href='#' rel='3'><span style='color: white;'><b>3</b></span></a>
          <a href='#' rel='4'><span style='color: white;'><b>4</b></span></a>
      </div>
    </div>
   </div>
 </div>

PASO 3: CSS

En este paso le daremos formato a este slider, para que se vea bien y tenga una vista agradable, habrá que adaptar el color según tengas un blog de color oscuro o claro. Deben buscar ]]></b:skin> y pegar arriba:

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

#slider {
background-color: #161616;/*Color de fondo del 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;
}
.contenta h2 a {
        text-decoration: none;
color: #FFFFFF;/* Color de los números*/
}
.contentnav a{
        padding-top: 5px;
        padding-bottom: 5px;
        padding-right: 10px;
        padding-left: 10px;
text-decoration: none;
color: #2432F6;
}
.contentnav a.active {
font-weight: bold;
color:#FFF;
background: #2432F6;/* Color del círculo de los números*/
        -moz-border-radius: 25px;
        -webkit-border-radius: 25px;
        border-radius: 25px;
}

Bueno, eso es todo. Espero que les sirva y logren implementarlo de manera correcta. Ante cualquier duda dejenla en los comentarios, serán respondidas a la brevedad ;) .


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