https://github.com/kenkyoo/six-carousels

Este proyecto presenta seis ejemplos de **carousels** creados con HTML, CSS y JavaScript. Cada uno demuestra diferentes estilos y funcionalidades que pueden ser utilizados en diversos proyectos web.
https://github.com/kenkyoo/six-carousels

carousel carousel-component carousel-js css html javascript

Last synced: 4 days ago
JSON representation

Este proyecto presenta seis ejemplos de **carousels** creados con HTML, CSS y JavaScript. Cada uno demuestra diferentes estilos y funcionalidades que pueden ser utilizados en diversos proyectos web.

• Host: GitHub
• URL: https://github.com/kenkyoo/six-carousels
• Owner: Kenkyoo
• Created: 2024-11-27T10:47:16.000Z (about 1 month ago)
• Default Branch: main
• Last Pushed: 2024-11-27T11:20:19.000Z (about 1 month ago)
• Last Synced: 2024-11-27T11:33:11.441Z (about 1 month ago)
• Topics: carousel, carousel-component, carousel-js, css, html, javascript
• Language: HTML
• Homepage: https://kenkyoo.github.io/six-carousels/
• Size: 0 Bytes
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# Six Carousels

Este proyecto presenta seis ejemplos de **carousels** creados con HTML, CSS y JavaScript. Cada uno demuestra diferentes estilos y funcionalidades que pueden ser utilizados en diversos proyectos web. 

## Vista Previa

El proyecto incluye los siguientes tipos de carousels:

1. **Expanding**: Un carousel interactivo que expande el contenido al hacer clic.

2. **Slider**: Un slider simple y dinámico con navegación lateral.

3. **Tabs**: Navegación mediante pestañas para mostrar contenido relacionado.

4. **Slideshow**: Un carousel automático con transiciones fluidas entre imágenes.

5. **Backgrounds**: Cambia el fondo dinámicamente al interactuar con el contenido.

6. **Mobile**: Carousel optimizado para dispositivos móviles con gestos táctiles.

## Estructura del Proyecto

El repositorio está organizado de la siguiente manera:

six-carousels/ │ ├── expanding/ │ ├── index.html │ ├── style.css │ └── script.js │ ├── slider/ │ ├── index.html │ ├── style.css │ └── script.js │ ├── tabs/ │ ├── index.html │ ├── style.css │ └── script.js │ ├── slideshow/ │ ├── index.html │ ├── style.css │ └── script.js │ ├── backgrounds/ │ ├── index.html │ ├── style.css │ └── script.js │ ├── mobile/ │ ├── index.html │ ├── style.css │ └── script.js │ └── index/ ├── index.html ├── style.css └── script.js

- Cada subcarpeta contiene los archivos necesarios para un carousel individual.

- La carpeta `index` contiene la página principal, que sirve como **vista general** para explorar los diferentes carousels.

    Explora cada carousel:

    Cada subcarpeta tiene un archivo index.html que puedes abrir para probar el carousel de forma individual.

Requisitos

    Un navegador moderno compatible con HTML5, CSS3 y JavaScript.

    No se requiere instalación de dependencias adicionales.

Tecnologías Utilizadas

    HTML: Estructura del contenido.

    CSS: Estilos y diseño visual.

    JavaScript: Interactividad y funcionalidad dinámica.

Créditos

Este proyecto fue creado por Kenkyoo.

Las imágenes utilizadas en los ejemplos provienen de Unsplash, Pexels y otros recursos libres de derechos.

Contribuciones

¡Las contribuciones son bienvenidas! Si tienes ideas para mejorar o agregar más carousels, por favor crea un Pull Request o abre un Issue.

Licencia

Este proyecto está bajo la licencia MIT. Consulta el archivo LICENSE para más detalles.