Algunos me habéis preguntado sobre el slider que hay en la página de Trabajos de Emenia. Se trata de un sencillo slider o deslizador de contenidos creado con jQuery. Vamos a crear uno más sencillo como ejemplo. En realidad la mecánica es la misma, sólo que en este ejemplo dentro de cada contenido a deslizar vamos a usar sólo texto, pero podemos poner todo tipo de contenidos.
Vamos a poner un ejemplo para crearlo de cero. Partimos de un menú creado en HTML:
|
1 2 3 4 5 |
<ul class="menu_slider"> <li><a class="opcion1" href="#" title="Opción 1">Opción 1</a></li> <li><a class="opcion2" href="#" title="Opción 2">Opción 2</a></li> <li><a class="opcion3" href="#" title="Opción 3">Opción 3</a></li> </ul> |
Como veis es un menú simple, con tres enlaces. Los enlaces no llevan a ninguna página porque todo el contenido está en la misma página y los enlaces los vamos a usar sólo para ir mostrando la parte que queremos enseñar del contenido.
Ahora, a continuación del menú escribimos el contenido. Dentro de cada “div” podemos meter lo que queramos: texto, imágenes, video o una mezcla de todo, claro. Para simplificar voy a meter sólo texto.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 |
<div id="contenidos"> <div class="opcion1"> <h3>Este es el contenido de la Opción 1</h3> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> </div> <div class="opcion2"> <h3>Este es el contenido de la Opción 2</h3> <p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p> </div> <div class="opcion3"> <h3>Este es el contenido de la Opción 3</h3> <p>Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. </p> </div> </div> |
Y damos unos pequeños estilos para poner el menú a la izquierda de todo el contenido:
|
1 2 3 |
ul.menu_slider { float: left; width: 120px; } #contenidos { margin-left: 195px;} .menu_slider a.aqui { color: black;} |
Como veis simplemente he puesto el menú a la izquierda y los contenidos a su derecha. He añadido una línea más, en la que al enlace con la clase “aqui” se le asigna el color negro. Lo que pretendo es que cuando hagamos click en una opción y se vea su contenido, el enlace de esa opción en el menú esté resaltado. La clase la vamos a añadir y quitar con jQuery.
Bueno, y ahora vemos a ver las líneas de jQuery que van a moverlo todo:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 |
<script type="text/javascript"> $(document).ready(function(){ // Script del Slider $("div.opcion2, div.opcion3") . hide(); $('a.opcion1') . addClass('aqui'); $("a.opcion1").click(function(e){ $('.menu_slider a').removeClass('aqui'); $(this).addClass('aqui'); $('div.opcion1').show('slow'); $('div.opcion2, div.opcion3') . hide('slow'); return false; e.preventDefault(); }); $("a.opcion2").click(function(e){ $('.menu_slider a').removeClass('aqui'); $(this).addClass('aqui'); $('div.opcion2').show('slow'); $('div.opcion1, div.opcion3') . hide('slow'); return false; e.preventDefault(); }); $("a.opcion3").click(function(e){ $('.menu_slider a').removeClass('aqui'); $(this).addClass('aqui'); $('div.opcion3').show('slow'); $('div.opcion1, div.opcion2') . hide('slow'); return false; e.preventDefault(); }); }); </script> |
En la línea 3 ocultamos los contenidos de las Opciones 2 y 3, con lo cual sólo se verá el contenido de la Opción 1. Queremos que el contenido de la Opción 2 sólo se vea al hacer click sobre el enlace del menú que le corresponde. Y lo mismo para la Opción 3.
En la línea 4 añadimos la clase “aqui” al enlace de la Opción 1, que es el primero que va a estar a la vista.
En la linea 6 decimos que si se hace click sobre el enlace del menú que tiene la clase “opcion1″ se haga lo siguiente:
- Se quite la clase “aqui” a todos los enlaces.
- Se añada la clase “aqui” al enlace sobre el que se ha hecho click.
- Se muestra el contenido con la clase “opcion1″.
- Se oculta el contenido de las otras dos clases.
Lo mismo se repite para el resto de los bloques de contenido, cada uno con su clase.
¡Y ahí lo tenéis! Hay que tener en cuenta las ventajas y los inconvenientes de hacer algo de este tipo:
Ventajas:
- No hace falta recargar la página para ver cada parte, por lo que se muestran los contenidos de manera mucho más rápida y efectista.
Desventajas:
- Desde el punto de vista SEO esta opción puede que sea peor ya que no estamos creando diferentes páginas a indexar cada una con el título de cada contenido, su URL propia, sus meta-etiquetas, etc..
- Si a alguien le interesa sólo uno de los contenidos no puede hacer un enlace directo al mismo, o guardar sólo ese contenido en favoritos.
- Si el navegador del usuario tiene desactivado Javascript se verán todos los contenidos, pero el menú pierde su razón de ser.
Por ello es recomendable usar este método sólo cuando la ocasión lo propicie. ¿Qué opináis?
Es realmente estupendo vuestro blog. Estoy aprendiendo mucho gracias a esa sencillez que tan bien utilizais. Enhorabuena y mucho trabajo, que os lo mereceis.
Gracias
Gracias Carlos! Me alegro que los artículos te sean útiles.
Hola, porfavor podrian poner un tutorial de imagenes Slider con JQUERY. con toda la demo si no es molestia.
Hola Juan,
En este ejemplo puedes sustituir los textos por imágenes. Sí es verdad que no se autoejecuta. A ver si tengo tiempo y hago una que lo haga.
También te puede servir este artículo:
http://www.emenia.es/galeria-imagenes-y-texto-jquery/
Trate de hacerlo y no funcionó, programar no es precisamente lo mio, aunque según yo lo puse de forma adecuada, y no me funciona, te dejo el código ojalá me puedas ayudar pues este script me sería muy útil… de ante mano gracias:
No se ve bien el código y no veo el id que has puesto en cada div inferior. Fíjate en el ejemplo que es #opcion1 etc..
Ok gracias
Me ha sido de mucha utilidad
thanks!
esto me va servir para cuando entienda jquery, pero recien estoy empezando con javascript
gracias por la informacion, me lo guardo
Gracias amigo por el ejemplo, lo probare a ver que tal.
Una pregunta, para que usastes el:
e.preventDefault(); ?
y por que cada funcion retorna falso?.
Hola, excelente trabajo y muy bien explicado. Gracias por pensar en las personas que estamos iniciando en éste desarrollo. Tengo una duda ¿Qué tendría qué hacer para que en lugar de un “click” todo pasara automáticamente?
Saludos y Felicidades por el aporte!
Saludos.
De antemano muchas gracias, excelente trabajo.
Este código la he utilizado en un pequeño aside para mostrar información de eventos.
Una inquietud: ¿Cómo puedo poner el código jQuery en un archivo .js y vincularlo al html?
Te cuento. He creado un archivo sliderEventos.js y copié todo el código jQuery sin las etiquetas script. Luego en el html lo vinculo con la siguiente linea:
Pero esto no me funciona. En qué estaré fallando?.
Gracias.
Muchas Gracias cracks, muy bueno vuestro sitio.
Muchas gracias por compartir tus conocimientos , muchas gracias.