AutoSlider con jQuery

Por Julio Giampiere Grados Caballero
AutoSlider con jQuery

En este tutorial crearemos un simple auto-slider con jQuery. ¿Deseas tener un carrusel de imágenes? Aquí conocerás cómo hacerlo, rápido, fácil y con tan solo unos conceptos básicos.

Un autoslider te permite presentar un conjunto de elementos en una serie consecutivas de vistas, donde podrás notar el efecto de cambio entre elementos. Sin más, iniciemos este tutorial.

Empezaremos creando nuestro contenido HTML y los estilos CSS, crearemos una sección donde le agregaremos un degradado. Esta sección tendrá por selector class:

class="background__degraded"

Los estilos para este elemento serán:

.background__degraded {
background-color: #11CDA3;
}

Dentro de está sección, tendremos un contenedor que se adaptará a un tamaño estable de 1000px, será un elemento "div" con selector class de la siguiente manera:

class="container"

Los estilos para este elemento serán:

.container {max-width: 1000px;margin: 0 auto;padding: 0 15px;}

En este container, indicaremos el contenido slider, de la siguiente manera, una etiqueta "div", dentro de container y el selector class slider__page, veamos:

class="slider__page"

Los estilos para este elemento serán:

.slider__page {
  padding: 15px 0 150px 0;
}

Agregamos un padding-bottom de 150px, para que contenga a las imágenes, las cuales tendrán una posición absoluta, antes de ello, agregaremos un titulo a través de un "h1", dentro de "slider__page", y el título será: "Este es un ejemplo de carrusel con imágenes", de la siguiente manera:

class="slider__page__title"

Los estilos para este elemento serán:

.slider__page__title {
  color: #fff;
  font-size: 25px;
  text-align: center;
  font-weight: 400;
  text-transform: uppercase;
}

A este título le hemos agregado un color blanco, un tamaño de letra de 25px, lo centraremos, y un grosor de letra de 400, y por último indicaremos que todo este texto estará en mayúsculas.

Agreguemos ahora al contenedor de nuestra imágenes, a través de una etiqueta "div", al mismo nivel de "slider__page__title", y el selector:

class=”slider”

Los estilos para este elemento serán:

.slider {
  margin: 0px auto;
  position: relative;
  width: 200px;
  height: 100%;
  padding: 30px 0 0 0;
  text-align: center;
}

Para este slider, indicaremos un margen de 0 auto, una posición relativa, un width de 200px y un heigth de 100%; un padding top de 30px. y un text-align, para centrar el texto.Veamos cómo trabajar para cada item del slider:

Los estilos para este elemento serán:

.slider__item {
  position: absolute;
  top: 10px;
  left: 10px;
  right: 10px;
  bottom: 10px;
  display: none;
}
.slider__item:first-child {
  display: block;
}

Empecemos explicando sobre slider__item, aquí tenemos una posición absoluto ya que está dentro de un contenedor con posición relativo, ahora un top de 10px; al igual que left, rigth y bottom para que todos tomen la mismo posición uno sobre otro, y por último esconderemos a todos, en el siguiente selection con first-clid, selección al primer elemento que tiene por clase slider__item, y lo mostramos.

Nos toca tan sólo dar unos estilos para una imagen y uno nombre:

class="slider__image" src="https://s3-us-west-2.amazonaws.com/devcode/img/topics/[email protected]"

Los estilos para este elemento serán:

.slider__image {
  width: 100px;
  height: 100px;
}

.slider__title {
  color: #fff;
  font-size: 16px;
  text-align: center;
  font-weight: 200;
}

Bien, ahora realizaremos el efecto con jquery. Primero seleccionaremos al primer item de slider, para esto indicaremos un id, slideshow, para realizar una selección única de elemento.

$('#slideshow > div:first')

Con first, seleccionamos el primer div hijo de dicho id indicado, ahora un fideout, que ocultará al elemento en un tiempo determinado, posterior a esto, .next(), que obtiene el hermano posterior al elemento seleccionado, ahora un fadeIn, para mostrar un elemento en un tiempo determinado, end(), que ponemos fin a la operación que estamos realizando no sin antes poner el elemento seleccionado que hemos ocultado al final del contenedor.

$('#slideshow > div:first')
.fadeOut(2000)
.next()
.fadeIn(2000)
.end()
.appendTo('#slideshow');

Y para terminar para que esto, se muestre uno consecutivamente después de otro, de forma instantánea agregaremos un setinterval con un tiempo de 5000 milisegundo.

setInterval(function() { 
$('#slideshow > div:first')
.fadeOut(2000)
.next()
.fadeIn(2000)
.end()
.appendTo('#slideshow');
},  5000);

Bien esto ha sido todo por este tutorial, recuerda que puedes encontrar nuestro curso de jquery y javascript, disponibles en la plataforma. Hasta la próxima.

¿Te gustó el tutorial?

Ayúdanos a llegar a más personas

Julio Giampiere Grados Caballero

Julio Giampiere Grados Caballero

CTO y Cofundador de Devcode.la. Full stack JavaScript. React | jQuery | Vanilla | Backbone | Node | MongoDB.