Skip to content

findawayer/kineto

Repository files navigation

kineto · GitHub license

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="kineto.css" />
  </head>
  <body>
    <script src="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.