INICIO

CÓDIGO PARA HACER SLIDER | FÁCIL Y CON EXPLICACIÓN

Los puedes llamar como quieras, desde sliders hasta presentación de imágenes o cajita con fotos que cambian o slideshow. Lo mismo da.

Si quieres crear uno de esos para tu sitio web o para la web de un cliente, y no sabes por dónde empezar, aquí estoy yo para ayudarte.

Lo haremos usando HTML, CSS y jQuery como lenguajes base. Porque sí, porque lo valen.

La parte HTML

Meteremos las fotos en un contenedor, para tener control sobre ellas. Será un contenedor de tipo ul, así la semántica de la web quedará super bonita.

<ul class="superslider">
    <li>IMAGEN 1</li>
    <li>IMAGEN 2</li>
    <li>...</li>
</ul>

Qué bien.

La parte CSS

Aquí es donde vamos a vestir la situación con elegancia y estilo.

Cada uno que haga lo que quiera, pero la parte fundamental es ocultar las imágenes de la cajita, con display:none; para que no se muestren todas al mismo tiempo.

La parte JavaScript (jQuery)

Bueno HTML es el esqueleto y CSS la ropita, pero quien de verdad va a mover el baile es JavaScript, disfrazado de jQuery.

Definiremos algunas variables importantes, como por ejemplo fotitoActual, para que podamos tener control sobre qué foto mostrar en cada instante.

También definiremos la variable elementos=jQuery(‘.superslider li’); que básicamente es un objeto que tiene la referencia a todas las imágenes de la presentación.

Necesitamos también una variable que contenga la cantidad de elementos, para que podamos hacer cálculos varios. La llamaremos cantidadElementos.

Creamos una función que sea rularSlides(), para que los slides rulen.

function rularSlides() {
  var cogerActual = jQuery('.superslider li').eq(fotitoActual);
  elementos.hide();
  cogerActual.css('display','inline-block');
}

Vemos que es una función super mega sencilla.

Coge la imagen actual y la muestra ocultando todas las demás.

No podría ser más sencillo.

El código resultante

Si ponemos todo en un potaje mixto, tenemos algo así.

Así:

<html>
<head>
<title>Superslider</title>
<style>
.superslider{
  max-width:400px;
  margin:0 auto;
  text-align:center;
  position:relative;
  margin:0;
  padding:0;
}
.superslider li{
  width:100%;
  display:none;
  margin:0;
  padding:0;
}
.superslider img{
  width:100%;
  height:auto;
}
</style>
</head>
<body>

  <ul class="superslider">
    <li style="display:inline-block;"><img src="//placeimg.com/400/200/people"/></li>
    <li><img src="//placeimg.com/400/200/any"/></li>
    <li><img src="//placeimg.com/400/200/nature"/></li>
  </ul>

<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js?ver=1.4.2"></script>
<script type="text/javascript">
jQuery(function(){

    var fotitoActual = 0,
      elementos = jQuery('.superslider li'),
      cantidadElementos = elementos.length;

    function rularSlides() {
      var cogerActual = jQuery('.superslider li').eq(fotitoActual);
      elementos.hide();
      cogerActual.css('display','inline-block');
    }

    var autoSlide = setInterval(function() {
      fotitoActual += 1;
      if (fotitoActual > cantidadElementos - 1) {
        fotitoActual = 0;
      }
      rularSlides();
    }, 3000);

});
</script>
</body>
</html>

Y eso está muy simple pero muy bien.

Ver demo online

Mira aquí cómo queda el asunto.

Ver: Demo del superslider.

Nada más, y nada menos.