JQuery biblioteca de JavaScript

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

Nestor Tapia

Bloggero, amante de la programación PHP, innovador y me fascina compartir información. Desde que conocí el entorno informatico y el internet me llamó la atención la programación, Por tal motivo he creado mi blog BAULPHP.COM para compartir mis experiencias con todos ustedes. ¡Gracias por leerme!.

Un comentario

  1. Hola Néstor tendrá algún curso o materia estoy empezando en el entorno de desarrollo con el framework CodeIgniter 4 y actualmente comencé un un proyecto de un reporte fotográfico usando la librería de Datatable
    Prcocesar datos desde el controlador PHP y recuperarlo con Ajax
    Será posible que me brindes alguna asesoría para hacer un un slider cuando de haga onclick en el campo de fotos de la tabla e ir recorriendo las fotos por cada índice de la matriz

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Botón volver arriba
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. Más información
Privacidad