Responsive slides JS

John SerranoJohn Serrano
23 mayo - 2016
JavaScript

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.

The Ghost Logo

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.

The Ghost Logo

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. Desarrollador Web Full-Stack. Entusiasta de las tecnologías web: JavaScript, Node.js, Docker, Firebase, React, etc. Me puedes encontrar en las siguientes redes sociales:

  • en Facebook
  • Twitter
  • GitHub
  • LinkedIn

Si te gusta lo que lees puedes apoyarme haciendo una donación con PayPal, de antemano gracias por tu apoyo.

Puedes donar criptomonedas con:
TRX Tron red TRC20:
TR3nVEsRexQkdXasRLAXLW2n7DmyS7ksrq
BTC Bitcoin red BTC:
1Bd849Xr3T3i9nn96uF2JuYhp98wZyod6Q
BNB Smart Chain BSC:
0xe8ac8dc8e56208d4dad5f719ba627436187acc16

No hay un amor más grande que el dar la vida por los amigos. Juan 15:13

¿Te gusta lo que lees?

Suscríbete

Otros artículos