- Plantillas Web
- Plantillas E-commerce
- Plantillas de CMS y Blog
- Plantillas Facebook
- Constructor Web
FAQs
General Tutorials
MonsterONE Subscrioption
Slider “Antes-Después”
noviembre 15, 2010
Es un script de Slider que le permite mostrar dos imágenes en un solo contenedor y arrastrar una imagen sobre otra que es bueno para comparación "antes-después".
Este plug-in tiene varias ventajas importantes:
• Pequeño tamaño de fichero (sólo 7 Kbytes);
• Puede utilizarlo muchas veces en la misma página;
• Si JavaScript está desactivado no perderá un contenedor, mostrará solamente la primera imagen.
JavaScript
Para que el script funcione, el fichero index-#.html con slider debe contener estas líneas de código HTML:
La sección <head> del fichero index-#.html contiene estas líneas de código que inicializan la funcionalidad de script con los valores básicos:
Si desea utilizar atributos específicos para slider tendrá que definir ellos al inicializar el plug-in.
Aquí atributos de script definen los siguientes valores:
• animateIntro – si este atributo muestra ‘true’, el slider se mueve lentamente (false por defecto);
• introDelay: 2000 –si animateIntro es configuardo como true, este atributo define una pausa antes del inicio de animación;
• introDuration: 500 –si animateIntro es configurado como true, este atributo define el tiempo total de animación;
• showFullLinks: false – define si se muestran los enlaces que permiten mirar las imágenes completas ("antes" o "después de ") a la vez.
HTML
Para crear un slider tendrá que definir dos imágenes que tienen el ancho y la altura fijos.
Ahora se puede revisar una representación de script HTML:
CSS
Usted puede encontrar stylesheet relacionado con script en el fichero style.css principal. Usted tendrá que modificar los siguientes estilos:
Asegúrese de configurar overflow: hidden;para #container id.
