kineto · 
Kineto is an open source JavaScript library for building carousels on websites. It aims to cover every essential feature of a carousel while staying simple and intuitive for integration.
kineto works on all ECMAScript 5 compliant browsers. We have no plan to support IE 8 and prior that are unable to parse compressed source codes.
Get started
Install kineto
Please download the latest version of kineto. Ready-to-use resources are located in /dist folder.
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://github.com/findawayer/kineto/blob/main/kineto.css" />
</head>
<body>
<script src="https://github.com/findawayer/kineto/raw/main/kineto.js"></script>
</body>
</html>- Insert the CSS and JS files into your HTML.
- The CSS file contains opinionated theme for Kineto's submodules. You don't need to include it if you are going to create your own look and feel.
- The JS file is placed at the end of body element for improved performance.
Create HTML structure
You only need to have a container holding your content slides as direct children elements. class and accessibility attributes will be automatically added once you enable Kineto.
<div id="carousel">
<div>Slide 1</div>
<div>Slide 2</div>
<div>Slide 3</div>
</div>Initialize Kineto with JavaScript
Once DOM is ready, you can now initialize kineto with Kineto.create() method.
Kineto.create('#carousel', { pagination: true });Kineto is applied to all elements matching the selector provided. To control only a specific instance, we recommend you to use either a unique selector or an element object instead the selector.
More detailed informations are available on documentation page.