Este archivo es adecuado para el banner de la página de inicio, la presentación de diapositivas, el visor de productos, la galería, aunque se puede usar como introducción. Todas las animaciones son personalizables, por lo que son adecuadas para cualquier tipo de banner. Puede usar cualquier número de capas en cada control deslizante. Puede posicionar y espaciar cada capa fácilmente usando atributos de datos. En el archivo de descarga, cinco muestras predeterminadas están disponibles en un archivo html separado.
Funciona bien en todos los navegadores, incluidos iPad, iOS y dispositivos Android.
Casi todas las opciones están disponibles para personalizar este control deslizante sin editar el código fuente
Capacidad de pantalla táctil para escritorio y dispositivo de pantalla táctil
Use cualquier tipo de contenido Div, puede ser div múltiple, imagen (incluido el formato de imagen transparente), video, youtube y swf (archivo flash)
Características unicas:
- Fácil de alinear, espaciado y dirección de animación para cada imagen y texto
- Opción para elegir cualquier tipo de dirección de animación de entrada/salida
- Opción para configurar la distancia de llegada de la animación.
- Animación en movimiento del patrón de fondo
- Opción para configurar el tiempo de entrada/salida para cada div
- Opción para establecer el tiempo de retraso de la presentación de diapositivas para cada diapositiva
- Habilitar/deshabilitar arrastre de escritorio
- Admite imágenes y texto ilimitados en cada diapositiva
Botón punteado:
- Hay disponibles tres tipos diferentes de botón punteado con diseño de botones Siguiente y Anterior
- Coloque la navegación en cualquier lugar usando la opción Alinear y Espaciar
- Mostrar/Ocultar los botones de puntos, Siguiente y Anterior
- Habilitar/deshabilitar la ocultación automática de navegación
Miniaturas:
- Opción para mostrar Miniaturas con botón siguiente y anterior
- Se puede cambiar fácilmente el ancho y la altura de la miniatura usando css
- El color del borde de la miniatura, el tamaño del borde, el espacio de miniatura a miniatura se controlan a través del archivo css
- La miniatura se ajusta automáticamente al ancho del banner. También puede cambiar el área de vista de miniaturas
- Ratón en miniatura sobre la imagen de tinte o control a través del archivo css, también puede usar color en lugar de imagen
- Coloque la miniatura en cualquier lugar usando las opciones de Alinear y Espaciado
- Puede mostrar tanto botones punteados como miniaturas
Otras características:
- La presentación de diapositivas se detiene cuando el usuario presiona el banner; de lo contrario, continúa reproduciéndose.
- Hay cinco tipos diferentes de muestras disponibles.
- Admite todos los navegadores
- Soporte de fuente Cufon
- Puedes animar cualquier cosa que coloques dentro del div
En el código del complemento, puede personalizar la presentación de diapositivas usando las siguientes variables
jQuery(function($){
$('#jq_fmslideshow').fmslideshow({
banner_width : "",
banner_height : "",
image_sprite : "fmslideshow_assets/sprite.png",
image_background : "",
image_topShadow : "",
image_bottomShadow : "",
image_loader : "fmslideshow_assets/loader_img.png",
background_fullScreen : false,
background_move : false,
background_moveDistance : 1250,
buttons_type : 0,
buttons_autoHide : false,
buttons_align : "BC",
buttons_spacing :"15,0",
button_nextPrevious_type : 0,
button_nextPrevious_autoHide : true,
button_next_align : "RC",
button_next_spacing : "20,0",
button_previous_align : "LC",
button_previous_spacing : "20,0",
dotButtons : false,
button_next_previous : false,
thumbnails_align : "BC",
thumbnails_spacing : "-75,0",
thumb_next_preious_width : 38,
slideShow : false,
slideShow_delayTime : 2,
desktop_drag : true
default_data_align : "LC",
default_data_spacing : "70,0",
default_data_inOutDirection : "LR",
default_data_inOutDistance : "60"
});
});
Ejemplo de código de presentación de diapositivas
<!--Slide 1 -->
<div>
<img data-align="BL" data-spacing="0,50" data-inoutdirection="BB" data-inoutdistance="50" data-starttime="0" data-staytime="5" data-animationspeed="700" data-easein="easeOutQuart" data-easeout="easeOutSine" class="imgSty" src="https://codecanyon.net/item/jquery-homepage-banner-slideshow-product-viewer/images/image2.png" alt="fmslideshow" />
<div data-align="TR" data-spacing="70,0" data-inoutdirection="RL" data-starttime=".5" data-staytime="6" data-animationspeed="400" data-easein="easeInQuart" data-easeout="easeOutSine" class="divStyle">
<span class="txtLarge">Customize Animation</span>
</div>
<div data-align="TR" data-spacing="20,0" data-inoutdirection="LR" class="divStyle" data-inoutdistance="60">
<span class="txtMedium">In/Out Direction - Alignment - Spacing</span>
</div>
</div>
El documento de ayuda completo está incluido en el archivo de descarga
Actualización el 10-06-2013: Error menor corregido
Actualización el 23-11-2012: Error de IE10 solucionado
Si tiene alguna pregunta sobre este archivo, contácteme a través de mi página de perfil.
