Responsive slides JS
Hoy les traigo un pequeño artículo para manejar slides con una librería llamada responsive slides que nos permite mostrar varias imágenes como un carrousel e ir cambiándolas automáticamente o manualmente.
Lo primero es ir a esta página para buscar el cdn de la librería https://cdnjs.com/#q=ResponsiveSlides buscamos la librería y copiamos el cdn.
Ahora creamos un archivo html y agregamos el cdn pero antes de eso también necesitamos el cdn de jquery, agregamos esos cnd de la siguiente manera.
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/ResponsiveSlides.js/1.53/responsiveslides.min.js"></script>
Agregamos una etiqueta ul de la siguiente forma.
<ul class="rslides">
<li><img src="1.jpg" alt=""></li>
<li><img src="2.jpg" alt=""></li>
<li><img src="3.jpg" alt=""></li>
</ul>
Nota: las imágenes deben estar en la misma posición del archivo html.
Ahora agregamos un script para el funcionamiento de la librería.
<script>
$(function() {
$(".rslides").responsiveSlides();
});
</script>
Seguido de eso agregamos unos estilos puede ser en un archivo externo o en el mismo html con style.
.rslides {
position: relative;
list-style: none;
overflow: hidden;
width: 100%;
padding: 0;
margin: 0;
}
.rslides li {
-webkit-backface-visibility: hidden;
position: absolute;
display: none;
width: 100%;
left: 0;
top: 0;
}
.rslides li:first-child {
position: relative;
display: block;
float: left;
}
.rslides img {
display: block;
height: auto;
float: left;
width: 100%;
border: 0;
}
El archivo final quedaría de la siguiente forma.
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<title>responsiveslides</title>
<style>
.rslides {
position: relative;
list-style: none;
overflow: hidden;
width: 100%;
padding: 0;
margin: 0;
}
.rslides li {
-webkit-backface-visibility: hidden;
position: absolute;
display: none;
width: 100%;
left: 0;
top: 0;
}
.rslides li:first-child {
position: relative;
display: block;
float: left;
}
.rslides img {
display: block;
height: auto;
float: left;
width: 100%;
border: 0;
}
</style>
</head>
<body>
<ul class="rslides">
<li><img src="1.jpg" alt=""></li>
<li><img src="2.jpg" alt=""></li>
<li><img src="3.jpg" alt=""></li>
</ul>
<!-- scripts -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/ResponsiveSlides.js/1.53/responsiveslides.min.js"></script>
<script>
$(function() {
$(".rslides").responsiveSlides();
});
</script>
</body>
</html>
Hasta el momento las imágenes cambian solas es responsive pero no tenemos los controles vamos a mostrarlos ahora, para eso vamos agregar unos atributos al script que agregamos y estamos apuntando con la clase llamada rslides quedando de la siguiente forma.
<script>
$(function() {
$(".rslides").responsiveSlides({
auto: true, // Boolean: Animate automatically, true or false
speed: 500, // Integer: Speed of the transition, in milliseconds
timeout: 4000, // Integer: Time between slide transitions, in milliseconds
pager: false, // Boolean: Show pager, true or false
nav: false, // Boolean: Show navigation, true or false
random: false, // Boolean: Randomize the order of the slides, true or false
pause: false, // Boolean: Pause on hover, true or false
pauseControls: true, // Boolean: Pause when hovering controls, true or false
prevText: "Previous", // String: Text for the "previous" button
nextText: "Next", // String: Text for the "next" button
maxwidth: "", // Integer: Max-width of the slideshow, in pixels
navContainer: "", // Selector: Where controls should be appended to, default is after the 'ul'
manualControls: "", // Selector: Declare custom pager navigation
namespace: "rslides", // String: Change the default namespace used
before: function(){}, // Function: Before callback
after: function(){} // Function: After callback
});
});
</script>
Para mostrar los controles cambiamos donde dice auto: false y pager: true y nav: true guardamos recargamos y listo ya tenemos los controles, podemos cambiar otras cosas como la velocidad el hover del pause etc, el resto seria agregarle estilos a los controles.
Cabe destacar que toda las imágenes son responsive como lo dice el mismo nombre de la librería, pero eso lo logramos con el estilo que de la damos en .rslides img del 100% podría ser menos y seguiría siendo responsive mientras tenga el signo porcentaje ”%“.
Bueno espero que sea de su ayuda hasta la próxima.
Soy John Serrano ingeniero de software con más de 7 años de experiencia. Me especializo en la creación de experiencias digitales de alto impacto. Entusiasta de las tecnologías web: JavaScript, TypeScript, Node.js, Docker, Firebase, React, etc. Me puedes encontrar en las siguientes redes sociales:
Apoyo
Estoy muy feliz de que disfrutes del contenido de johnserrano.co, si te gusta lo que lees y quieres respaldar mi trabajo, puedes realizar una donación a través de Tarjeta de crédito o PSE. Además, estoy disponible para recibir tu apoyo por correo electrónico en [email protected] si prefieres otras opciones. Tu apoyo ayuda a mantener este proyecto en marcha. ¡Gracias por tu apoyo!
Apoyo no monetario
Otra manera de ayudarme es difundiéndolo de boca en boca! Si consideras que el contenido que comparto en johnserrano.co puede ser valioso para tus amig@s y compañer@s, te invito a compartirlo en Twitter, LinkedIn o en la plataforma que prefieras. Tu recomendación puede marcar la diferencia. ✨
No hay un amor más grande que el dar la vida por los amigos. Juan 15:13
Otros artículos
¿Cómo crear códigos de barras en JavaScript y exportarlos a PDF?
Desarrollé un sistema de inventario y enfrenté el desafío de generar códigos de barras legibles por un lector. Aquí te muestro cómo hacerlo en JavaScript.
Hackatón de Midudev: Una oportunidad para aprender y conectar + vercel
Participa en esta gran oportunidad para aprender, crear y conectar con otros desarrolladores en el hackatón de Midudev. ¡No te lo pierdas!
TypeScript, Types vs interfaces
Cuando se trata de TypeScript, hay dos formas de definir tipos: 'types' e 'interfaces'. Vamos a explorar las diferencias y similitudes entre tipos e interfaces, así como cuándo es apropiado usar cada uno.