Carrusel de tarjetas mínimas en Vanilla JavaScript-simple-carrusel
| Autor: | aadityataparia |
|---|---|
| Views Total: | 1,631 |
| Sitio oficial: | Ir a la web |
| Actualizado: | March 3, 2018 |
| Licencia: | MIT |
Vista prévia
Descripción
Una simple y ligera vainilla JavaScript tarjeta Slider/Carousel plugin para su proyecto Web.
Características
- Carga diferida de imagen.
- Modo de pantalla completa.
- Efectos de transición sutiles.
- Navegación y paginación.
- Sin dependencias.
Funcionamiento
Importe los archivos del simple-Carousel en el documento.
<link rel="stylesheet" href="sc.css"> <script src="sc.js"></script>
Agregue sus propias imágenes junto con el Spinner de carga y los controles por secuencia a la página.
<div class="cor" id="demo"> <img class="loading" style="position: absolute" src="loading.gif" alt="loading"> <div class="scrollD"> <!-- insert imgs here --> <img data-src="https://picsum.photos/600/600?image=488" src="https://picsum.photos/600/600?image=488"> <img data-src="https://picsum.photos/600/600?image=454"> <img data-src="https://picsum.photos/600/600?image=449"> </div> <div class="arrow l noselect"> <img src="down.svg" class="fit" alt="\/" /> </div> <div class="arrow r noselect"> <img src="down.svg" class="fit" alt="\/" /> </div> <div class="br"> <div class="fs right"> <img src="fs.svg" alt="FS" /> </div> <div class="num"></div> </div> </div>
Inicialice el carrusel y listo.
SC.new(document.querySelector("#demo"));
