Portada » JQuery biblioteca de JavaScript » Slider automático en HTML y CSS

Slider automático en HTML y CSS

En este post aprenderemos a crear un Slider automático en HTML y CSS. Para integrar Slide de imágenes a nuestro `proyecto usaremos: jQuery, librería Backstretch, DIV que almacenara la pasarela de imágenes.

Slider automática en HTML y CSS

Para lograr una interacción correcta de imágenes de fondo usaremos el complemento jQuery Backstretch para ejecutar una diapositiva de imagen de fondo para una página web.

Este complemento deslizante extiende las imágenes al tamaño de la ventana de fondo. Estas imágenes deslizantes se colocan con un fondo fijo.

Ver Demostración

Pasos para integrar Slider automático en HTML

A continuación, veremos varios puntos que debemos de realizar para poder integrar las imágenes deslizantes.

Área de contenido HTML

Este código HTML muestra el contenido que se va a mover en el control deslizante de fondo fijo jQuery haciendo uso del complemento mencionado.

<body>
<div class="demo-div">
<h1>jQuery Background Slider To Resize Images to Background </h1>
<p>jQuery background slider shows background slide multiple image</p>

</div>
</body>

Complemento de control deslizante de fondo de jQuery

Debemos de declarar el complemento para su posterior llamado a la función de complemento Backstretch enviando una lista de imágenes que se mostrarán en la presentación de diapositivas de fondo.

Sin embargo, este complemento posee configuraciones en el cual podemos controlar la velocidad del control deslizante y el intervalo de tiempo entre dos diapositivas posteriores, etc.

Nota: Para ejecutar este script, debe de descargar la biblioteca de complementos Backstretch desde el repositorio oficial en GitHub.

<script src="jquery.backstretch.min.js"></script>
<script type="text/javascript">
$.backstretch(
[
"01.jpg",
"02.jpg",
"03.jpg"
],
{
duration: 2500,
fade: 700
});
</script>

Configuraciones del script

Este complemento también posee la opción de configuración para los elementos del slider dentro de nuestro fondo web, ya sea una página web o sistema web.

// Cantidad de tiempo entre diapositivas
duration: 5000,

// Tipo de transición entre diapositivas
transition: 'fade',

transitionDuration: 0,

animateFirst: true,

alignX: 0.5,

alignY: 0.5,

paused: false,

start: 0,
preload: 2,

preloadSize: 1,

resolutionRefreshRate: 2500,

resolutionChangeRatioThreshold: 0.1,

Integración con PHP y MySQL

Además, se podría integrar con PHP y MySQL para poblar nuestro slider con registros MySQL previamente con imágenes cargadas existentes en el servidor.

Ejemplo de integración con PHP y MySQL

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="vistas/js/jquery.backstretch.min.js"></script>
<script type="text/javascript">
$.backstretch(
[
<?php
$item = null;
$valor = null;
$slider = ControladorSlider::ctrMostrarSlider($item, $valor);
foreach ($slider as $key => $value){
if($value["estado"] =="1" and $value["foto"] !=""){
echo '"'.$value["foto"].'",';
}
}
?>
],
{
duration: 2500,
fade: 750,
scale: 'cover'
});
</script>

Conclusiones y recomendaciones

En este articulo hemos aprendido a implementar un simple y potente slider para proyectos web y puede ser usado, por ejemplo: en páginas web. login de sistemas web, intros, etc.

  • Está basado en jQuery, HTML y posee una amplia configuración en los elementos del slider.
  • Para una correcta integración necesitamos un fichero de la librería jQuery y un archivo del complemento y podemos hacer uso de un DIV para los Sliders.
Ver Demostración

¿De cuánta utilidad te ha parecido este contenido?

¡Haz clic en una estrella para puntuarlo!

Promedio de puntuación 0 / 5. Recuento de votos: 0

Hasta ahora, ¡no hay votos!. Sé el primero en puntuar este contenido.

Scroll al inicio
Esta web utiliza cookies propias para su correcto funcionamiento. Contiene enlaces a sitios web de terceros con políticas de privacidad ajenas que podrás aceptar o no cuando accedas a ellos. Al hacer clic en el botón Aceptar, acepta el uso de estas tecnologías y el procesamiento de tus datos para estos propósitos.
Privacidad