jQuery SliderTabs

SliderTabs es un plugin jQuery personalizable que te permite crear un slider de contenido que configurando sus opciones podemos conseguir un efecto con pestañas bastante atractivo.

sliderTabs

Algunas de sus características más destacadas

  • Fácil de configurar y personalizar
  • Múltiples controles deslizantes
  • Reproducción automática
  • Creación ilimitada de pestañas
  • Soporte multi navegador
  • Se adapta a todos los dispositivos

Instalar en tu página Web es tan sencillo como descargar jQuery SliderTabs y añadir los estilos necesarios y plugin que vienen en la descarga en la cabecera de tu página, dentro de la etiqueta <head>. Por ejemplo:

<link rel="stylesheet" href="styles/jquery.sliderTabs.min.css">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="jquery.sliderTabs.min.js"></script>

En el <body> allí donde queramos meteremos los contenedores que formarán las pestañas y su contenido:

<div id="mySliderTabs">
    <ul>
        <li><a href="#tab-1">Information</a></li>
        <li><a href="#tab-2">Features</a></li>
        <li><a href="#tab-3">Comments</a></li>
    </ul>
 
    <div id="tab-1">
        <h3>Information</h3>
        <p>Lorem Ipsum es simplemente el texto de relleno de las imprentas y archivos de texto. Lorem Ipsum ha sido el texto de relleno estándar de las industrias desde el año 1500, cuando un impresor (N. del T. persona que se dedica a la imprenta) desconocido usó una galería de textos y los mezcló de tal manera que logró hacer un libro de textos especimen. No sólo sobrevivió 500 años, sino que tambien ingresó como texto de relleno en documentos electrónicos, quedando esencialmente igual al original. Fue popularizado en los 60s con la creación de las hojas "Letraset", las cuales contenian pasajes de Lorem Ipsum, y más recientemente con software de autoedición, como por ejemplo Aldus PageMaker, el cual incluye versiones de Lorem Ipsum.</p>
        <p>Lorem Ipsum es simplemente el texto de relleno de las imprentas y archivos de texto. Lorem Ipsum ha sido el texto de relleno estándar de las industrias desde el año 1500, cuando un impresor (N. del T. persona que se dedica a la imprenta) desconocido usó una galería de textos y los mezcló de tal manera que logró hacer un libro de textos especimen. No sólo sobrevivió 500 años, sino que tambien ingresó como texto de relleno en documentos electrónicos, quedando esencialmente igual al original. Fue popularizado en los 60s con la creación de las hojas "Letraset", las cuales contenian pasajes de Lorem Ipsum, y más recientemente con software de autoedición, como por ejemplo Aldus PageMaker, el cual incluye versiones de Lorem Ipsum.</p>
        <p>Lorem Ipsum es simplemente el texto de relleno de las imprentas y archivos de texto. Lorem Ipsum ha sido el texto de relleno estándar de las industrias desde el año 1500, cuando un impresor (N. del T. persona que se dedica a la imprenta) desconocido usó una galería de textos y los mezcló de tal manera que logró hacer un libro de textos especimen. No sólo sobrevivió 500 años, sino que tambien ingresó como texto de relleno en documentos electrónicos, quedando esencialmente igual al original. Fue popularizado en los 60s con la creación de las hojas "Letraset", las cuales contenian pasajes de Lorem Ipsum, y más recientemente con software de autoedición, como por ejemplo Aldus PageMaker, el cual incluye versiones de Lorem Ipsum.</p>
    </div>
    <div id="tab-2">
        <h3>Features</h3>
        <ul>
            <li>Feature 1</li>
            <li>Feature 2</li>
            <li>Feature 3</li>
        </ul>
    </div>
    <div id="tab-3">
        <h3>Comments</h3>
        <ul>
            <li>Comment 1</li>
            <li>Comment 2</li>
            <li>Comment 3</li>
        </ul>
    </div>
</div>

Y finalmente, justo después de este <div> añadiremos la llamada al plugin:

<script>
$(document).ready(function(){
    var slider = $("div#mySliderTabs").sliderTabs();
});
</script>

Ver ejemplo en funcionamiento

Ver las opciones del plugin

Autor
Escrito por Jose Aguilar - Director ejecutivo y tecnológico en JA Modules. Experto programador PrestaShop y Experto programador WordPress.
Te ha servido? Valora esta entrada!
(5 votos, promedio: 5 de 5)
Comparte en las redes sociales
¿Buscas trabajo de programador?

Una respuesta a “jQuery SliderTabs”

  1. Marco dice:

    Srs buenas tardes..
    Tengo un.form dentro de carousel….quisiera pintar el select donde lista los modelos de auto segun la marca elegida que esta em otro select tambien dentro delnform y dentro del.mismo slider de carousel…

    Nota: no me funiona con jquery….no se por que….

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Este sitio usa Akismet para reducir el spam. Aprende cómo se procesan los datos de tus comentarios.

Ver más sobre