Carrusel responsivo básico con soporte Ajax-imageCarousel
| Autor: | eshanshah7 |
|---|---|
| Views Total: | 1,867 |
| Sitio oficial: | Ir a la web |
| Actualizado: | February 22, 2017 |
| Licencia: | MIT |
Vista prévia
Descripción
Una biblioteca de secuencia de imágenes de vainilla básica que carga dinámicamente la imagen desde un archivo JSON externo y luego las presenta en una interfaz de usuario de secuencia interactiva.
Funcionamiento
Cargue los archivos JavaScript y CSS necesarios en la Página Web.
<link rel="stylesheet" href="css/styles.css"> <script src="js/myjs.js"></script>
Cree un contenedor de carrusel junto con los controles de navegación & paginación:
<div id="container" class="slide-container"> <!-- prev/next buttons --> <a class="prev" onclick="plusSlides(-1)">❮</a> <a class="next" onclick="plusSlides(1)">❯</a> </div> <!-- pagination bullets --> <div id="dots"></div>
La estructura JSON debe ser así.
[{
"title": "title 1"
, "image_name": "1.jpg"
, "description": "description 1"
, "is_published": true
}, {
"title": "title 2"
, "image_name": "2.jpg"
, "description": "description 2"
, "is_published": true
}, {
"title": "title 3"
, "image_name": "3.jpg"
, "description": "description 3"
, "is_published": true
}]
