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:
Contenidorelaciondo
- Enlazar los archivos JS en la sección HEAD del HTML de la página.
- Implementar el script que le da la funcionalidad.
- Crear lso estilos CSS
- 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
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>
