Slider/carousel liviano en JavaScript con soporte táctil y autoplay opcional.
Descripción
kcSlider es un slider en JavaScript puro, sin dependencias, que permite hacer slides con transiciones suaves, loop infinito y soporte para gestos táctiles. Tiene autoplay configurable y pausa al pasar el mouse.
Demo
https://kaisarcode.com/resources/demos/kc-slider/index.html
Repositorio
https://github.com/kaisarcode/kc-slider
Características
- JavaScript vanilla sin librerías
- Transiciones suaves con loop infinito
- Soporte para swipe/touch en móviles
- Autoplay opcional con intervalo configurable
- Pausa al pasar el mouse
- Fácil de personalizar con CSS
- Arquitectura simple y modular
Uso
- Cloná el repositorio:
git clone https://github.com/kaisarcode/kc-slider.git- Incluí el CSS y JS en tu HTML:
<link href="kc-slider.css" rel="stylesheet" /> <script src="kc-slider.js"></script>- Agregá la estructura HTML:
<div class="kc-slider"> <div class="kc-slider-wrapper"> <div class="kc-slider-track"> <div class="kc-slider-item">Slide 1</div> <div class="kc-slider-item">Slide 2</div> <div class="kc-slider-item">Slide 3</div> </div> <div class="kc-slider-prev">‹</div> <div class="kc-slider-next">›</div> </div> </div>- Inicializá el slider con JS y las opciones que quieras:
kcSlider({ visibleItems: 1, autoplay: true, interval: 5000 });Licencia
Este proyecto se distribuye bajo la licencia GNU General Public License versión 3 (GPLv3).
Tags
javascript slider carousel touch autoplay frontend vanillajs ui component
