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ónPasos 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,HTMLy 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
DIVpara los Sliders.
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