- Plantillas Web
- Plantillas E-commerce
- Plantillas de CMS y Blog
- Plantillas Facebook
- Constructor Web
Slider jQuery UI
noviembre 15, 2010
Este es un script de Slider que utiliza jQueryui ui.
JavaScript
El fichero carousel.js contiene estas líneas de código para funcionar:
Aquí los atributos de script definen los siguientes valores:
• #featured – id del contenedor de script (id de contenedor de etiqueta <div>);
• {fx:{opacity: “toggle”} – este atributo define el efecto de cambio de slides; ahora está configurado para el cambio de la opacidad;
• 5000 – rato de cambio de slides.
HTML
HTML está formado por dos bloques lógicos: bloque de thumbnails (clase.ui-tabs-nav) y bloques de contenido que corresponden a thumbnail actual (todas etiquetas <div>con clase .ui-tabs-panel). Ambos bloques son parte de una etiqueta <div>por id de #featured.
Cada elemento de la lista de thumbnails (etiqueta <li>) obtiene id de #nav-fragment-#, # es el número de slide. Cuadros de contenido correspondientes obtienen id de get #fragment-#.
Ahora se puede revisar una representación de script HTML:
Para reemplazar slides con slides personalizados hay que reemplazar las imágenes colocadas en etiquetas <div>con clase .ui-tabs-panel.
Para reemplazar thumbnails con thumbnails personalizados hay que reemplazar las imágenes colocadas en la lista – etiquetas <li> con clase .ui-tabs-nav.
CSS
Usted puede encontrar stylesheet relacionado con script en el fichero style.css principal. Usted tendrá que modificar los siguientes estilos: