Cómo Crear un Control Deslizante de Imágenes con jQuery y CSS3

How to Create an Image Slider using jQuery and CSS3 [Tutorial]

Tema: CSS3 & jQuery
Dificultad: intermedia
Hora estimada de culminación: 30 minutos

En este tutorial vamos a crear un deslizador con Nivo Slider jQuery Script y CSS3. Vamos a utilizar el ” Nivo Slider jQuery Script” porque es una herramienta de gran alcance y es gratis. Este script tiene 16 efectos de transición, es simple, flexible y tiene un montón de características más agradables. Se puede utilizar en casi cualquier lugar y para casi cualquier tipo de proyecto, incluyendo sitios web y temas personales o comerciales.

En este tutorial vamos a codificar el Image Slider que se puede encontrar en Futurico UI Pro, hecha por Vladimir Kudinov.

Paso 1 – Formato básico en HTML

En primer lugar, usted necesita descargar la versión Nivo Slider jQuery aquí. Sólo se necesitan dos archivos del paquete que ha descargado: “nivo-slider.css” y “jquery.nivo.slider.pack.js”.

A continuación, cree el formato HTML básico y añada el CSS “Nivo Slider” y JS. También es necesario vincular a la biblioteca jQuery usando la última versión alojada en Google o si lo desea puede alojarla en su propio servidor, es su elección.

<html lang="en">
<head>
	<meta charset="utf-8">
	<title>Slider Tutorial</title>
	<link rel="stylesheet" href="css/nivo-slider.css" media="screen">
</head>

<body>

<!-- jQuery & Nivo Slider -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script src="js/jquery.nivo.slider.pack.js"></script>

</body>
</html>

Para cargar el control deslizante Nivo tenemos que añadir algunas líneas más de código antes de la etiqueta de cierre </body>. También tenemos que establecer algunas opciones para hacer los controles visibles, cambiar la opacidad del subtítulo y cambiar el texto de la diapositiva anterior y al lado de flechas. Puede encontrar la lista de opciones completa aquí.

<script>
	$(window).load(function() {
		$('#slider').nivoSlider({
			directionNavHide: false,
			captionOpacity: 1,
			prevText: '<',
			nextText: '>'
		});
	});
</script>

Para cargar el control deslizante Nivo tenemos que añadir algunas líneas de código antes de la etiqueta de cierre </body>. También tenemos que establecer algunas opciones para hacer los controles visibles, cambiar la opacidad del subtítulo y cambiar el texto de la diapositiva anterior y al lado de flechas. Puede encontrar la lista completa de opciones aquí.

<script>
	$(window).load(function() {
		$('#slider').nivoSlider({
			directionNavHide: false,
			captionOpacity: 1,
			prevText: '<',
			nextText: '>'
		});
	});
</script>

Paso 2 – Control deslizante en formato HTML

En primer lugar tenemos que crear un div con la clase “slider-wrapper” y “futurico-tema”. A continuación, crear un div con id “slider” y la clase “nivoSlider”. Para cada diapositiva vamos a crear un <img>.

<div class="slider-wrapper futurico-theme">

	<div id="slider" class="nivoSlider">

		<img src="img/slide1.png" alt="">

		<img src="img/slide2.png" alt="">

		<img src="img/slide3.png" alt="">

		<img src="img/slide4.png" alt="">

	</div>

</div>

Paso 3 – Deslizador Layout

Vamos a crear un slider de 300 px de ancho y 180 px de altura. Como vamos a agregar relleno de 5 px tenemos que restar 10 px de la anchura y de la altura. También vamos a establecer el color de fondo y las esquinas redondeadas.

.futurico-theme.slider-wrapper {
	position: relative;
	width: 290px;
	height: 170px;
	margin: 0;
	padding: 5px;

	background: #141517;

	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border-radius: 5px;
}

.futurico-theme .nivoSlider {
	position: relative;
	width: 290px;
	height: 170px;
}

.futurico-theme .nivoSlider img {
	display: none;
	position: absolute;
	width: 290px;
	height: 170px;
	top: 0;
	left: 0;
}

Paso 4 – Controles del deslizador

Ahora vamos a labrar los controles del deslizador. Vamos a empezar por el posicionamiento de los controles en la parte inferior y por centrarlos. Si va a tener más de cuatro diapositivas, tendrá que cambiar el valor“left” con el fin de centrar los controles.

.futurico-theme .nivo-controlNav {
	position: absolute;
	bottom: -30px;
	left: 105px;
}

Vamos a crear un círculo para cada diapositiva. Para el peinado añadiremos un color de fondo, algunas sombras y esquinas redondeadas para hacer el círculo. Para ocultar la numeración “1,2,3,4” vamos a añadir un guión de texto con un valor negativo.

.futurico-theme .nivo-controlNav a {
	display: block;
	float: left;
	width: 16px;
	height: 16px;
	margin-right: 5px;
	text-indent: -9999px;

	background: #141517;

	-webkit-border-radius: 16px;
	-moz-border-radius: 16px;
	border-radius: 16px;

	-webkit-box-shadow: inset 0px 1px 1px rgba(0,0,0, .5), 0px 1px 1px rgba(255,255,255, .05);
	-moz-box-shadow: inset 0px 1px 1px rgba(0,0,0, .5), 0px 1px 1px rgba(255,255,255, .05);
	box-shadow: inset 0px 1px 1px rgba(0,0,0, .5), 0px 1px 1px rgba(255,255,255, .05);
}

Para la diapositiva activa vamos a añadir un gradiente verde y cambiamos las sombras.

.futurico-theme .nivo-controlNav a.active,
.futurico-theme .nivo-caption span {
	background: #a5cd4e;
	background: -moz-linear-gradient(top,  #a5cd4e 0%, #6b8f1a 100%);
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#a5cd4e), color-stop(100%,#6b8f1a));
	background: -webkit-linear-gradient(top,  #a5cd4e 0%,#6b8f1a 100%);
	background: -o-linear-gradient(top,  #a5cd4e 0%,#6b8f1a 100%);
	background: -ms-linear-gradient(top,  #a5cd4e 0%,#6b8f1a 100%);
	background: linear-gradient(top,  #a5cd4e 0%,#6b8f1a 100%);

	-webkit-box-shadow: inset 0px 1px 1px rgba(255,255,255, .4), 0px 1px 1px rgba(0,0,0, .3);
	-moz-box-shadow: inset 0px 1px 1px rgba(255,255,255, .4), 0px 1px 1px rgba(0,0,0, .3);
	box-shadow: inset 0px 1px 1px rgba(255,255,255, .4), 0px 1px 1px rgba(0,0,0, .3);
}

Paso 5 – Slide siguiente y anterior

Para el estilo de los anteriores y siguientes controles deslizantes lo colocaremos en el centro y añadiremos algunos estilos básicos CSS (font-family, font-size, colores, etc.).

.futurico-theme .nivo-directionNav a {
	display: block;
	top: 60px;

	font-family: 'Consolas', sans-serif;
	font-size: 40px;
	color: #141517;
	text-shadow: 0px 1px 1px rgba(255,255,255, .05);
}

.futurico-theme a.nivo-prevNav { left: -40px; }

.futurico-theme a.nivo-nextNav { right: -40px; }

Paso 6 – Subtítulos en formato HTML

Para crear los subtítulos, necesitamos crear un div con una clase “nivo-html-caption” y un identificador aleatorio. Para vincular el título a la respectiva diapositiva añadir un “title” a la <img> con el mismo nombre que el caption id.

<div id="slider" class="nivoSlider">

	<img src="img/slide1.png" alt="" title="#caption1">

	<img src="img/slide2.png" alt="">

	<img src="img/slide3.png" alt="" title="#caption3">

	<img src="img/slide4.png" alt="">

</div>

<div id="caption1" class="nivo-html-caption">
	<strong>New Project</strong> <span></span> <em>Some description here</em>.
</div>

<div id="caption3" class="nivo-html-caption">
	<strong>Image 3</strong> <span></span> <em>Some description here</em>.
</div>

Paso 7 – Estilo de los subtítulos

Para el estilo de los subtítulos vamos a cambiar el color del texto de la familia de la fuente y tamaño de fuente. También vamos a utilizar el mismo gradiente verde que hemos usado antes.

.futurico-theme .nivo-caption {
	padding: 5px 0;

	font-family: Helvetica, Arial, sans-serif;
	font-size: 12px;
	color: #e1e1e1;

	background: #000000;

	-webkit-border-radius: 0 0 3px 3px;
	-moz-border-radius: 0 0 3px 3px;
	border-radius: 0 0 3px 3px;
}

.futurico-theme .nivo-caption span {
	display: inline-block;
	width: 5px;
	height: 5px;
	margin: 0 5px 1px 5px;

	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border-radius: 5px;
}

.futurico-theme .nivo-caption em {
	font-family: Georgia, sans-serif;
	font-size: 11px;
	color: #727581;
}

Conclusión

¡Eso es todo! Hemos creado un deslizador potente y hermoso. En este tutorial nos centramos en el estilo de la corredera y el “Nivo deslizante script” , cuidando la funcionalidad. No se olvide de dejar algunos comentarios y suscribirse.

Preview

Descargar el Image Slider

Si quieres mantenerte al día con nuestros artículos, puedes seguirnos en Twitter, Facebook, Google+, o incluso suscribiéndote a nuestro hilo RSS.

Boletín de noticias

0 Comentarios

No hay comentarios aún

Deja tu respuesta

*
* Longitud mínima: 20 caracteres