Este es un script de Slider que puede cortar automáticamente imágenes para crear diferentes efectos de transición. Usted puede encontrar las instrucciones completas de instalación y de configuración siguiendo este enlace.
JavaScript
Para que el script funcione, el fichero index-#.html con slider debe contener estas líneas de código HTML para incluir el script coin-slider.js y jQuery framework:
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:
El script comienza con el elemento <div> con id de #coin-slider. Los atributos de script definen los siguientes valores:
• width: 565 – anchura del panel de slider;
• height: 290 –altura del panel de slider;
• spw: 7 – cuadros por anchura;
• sph: 5 – cuadros por altura;
• delay: 3000 – pausa entre imágenes en ms;
• sDelay: 30 – pausa entre cuadros en ms;
• opacity: 0.7 – opacidad de título y de navegación;
• titleSpeed: 500 – velocidad de aparición del título en ms;
• effect: ‘ ‘ – efecto de transición, random por defecto (random, swirl, rain, straight);
• navigation: true – prev/next y botones;
• links : true – mostrar imágenes como enlaces;
• hoverPause: true – pausa al permanecer inmóvil.
HTML
Ahora se puede revisar una representación de script HTML:
Cada slide es una imagen (etiqueta <img>), colocada en un enlace (etiqueta <a>). También puede agregar una descripción de slide usando el elemento <span>. Para añadir un slide tendrá que añadir la siguiente estructura:
CSS
Usted puede encontrar stylesheet relacionado con script en el fichero style.css principal. Usted tendrá que modificar los siguientes estilos: