Contenido deslizante con jQuery

Contenido deslizante con jQuery

En otras oportunidades habíamos visto formas de implementar contenido deslizante con jQuery. ScrollTo es otra opción para mostrar contenido que se desliza; se trata de un plugin jQuery que ofrece muchas opciones de configuración y personalización, y que además, es muy simple de implementar.

Un ejemplo de como usar ScrollTo es el tutotorial publicado por Queness: Create a Custom Content Slider with jQuery. En éste se explica paso a poso como crear este tipo de contenido y además está disponible un demo funcional para descargar que se puede correr sin necesidad e montarlo en un servidor web.

Implmentación

Para hacer este tipo de implementación se requiere:

  1. Enlazar los archivos JS en la sección HEAD del HTML de la página.
  2. Implementar el script que le da la funcionalidad.
  3. Crear lso estilos CSS
  4. Crear la estructura HTML en la sección BODY con el contenido.

Enlazando archivos

<script type="text/javascript" src="jquery-1.4.min.js"></script>
<script type="text/javascript" src="jquery.scrollto.js"></script>

Script

<script type="text/javascript">
$(document).ready(function () {
	$('#hero-slider ul a').click(function () {
		//reset all the items
		$('.customBlock ul a').removeClass('active');
                //set current item as active
		$(this).addClass('active');
		//scroll it to the right position
		$('.mask').scrollTo($(this).attr('rel'), 300);
		//disable click event
	    return false;
	});
});
</script>

HTML

La estructura HTML está compuesta por UL que se usará para crear la lista de botones y unos DIV con las clases ‘panel’ y ‘panel-numero’ para el contenido.

<div id="hero-slider">
<ul>
<li><a href="#" rel="#panel-1" class="active">Botón 1</a></li>
<li><a href="#" rel="#panel-2">Botón 2</a></li>
<li><a href="#" rel="#panel-3">Botón 3</a></li>
</ul>
<div class="mask">
<div class="slider-body">
<div class="panel" id="panel-1">
<h2>Titulo 1</h2>
<p>Contenido</p>
</div>
<div class="panel" id="panel-2">
<h2>Titulo 2</h2>
<p>Contenido</p>
</div>
<div class="panel" id="panel-3">
<h2>Titulo 3</h2>
<p>Contenido</p>
</div>
</div>
</div> <!-- .mask -->
<div class="clear"></div>
</div> <!-- #hero-slider -->

Por último falta definir los estilos CSS, esto es la parte más extensa en cuanto al código de esta implementación; el código completo de las CCS esta explicado en Queness.

ScrollTo

Plugin jQuery ScrollTo

Tutorial Create a Custom Content Slider with jQuery

<script type="text/javascript" src="jquery-1.4.min.js"></script>
<script type="text/javascript" src="jquery.scrollto.js"></script>
<script type="text/javascript">
$(document).ready(function () {

	$('#hero-slider ul a').click(function () {

		//reset all the items
		$('.customBlock ul a').removeClass('active');

		//set current item as active
		$(this).addClass('active');	

		//scroll it to the right position
		$('.mask').scrollTo($(this).attr('rel'), 300);

		//disable click event
	    return false;		

	});

});
</script>

Por Diego Cambiaso

Comunicador Social, Desarrollador de Software y UX Designer. Blogger desde el 2006, creador de Pixelco Tech. Viajero y fotógrafo. Entusiasta del diseño, apasionado por la tecnología y el social media. EN-ES-IT