tileslider

A simple slider, that displayes multiple tiles in a row. A tile gets visible/active by click or by time (automation).

The slide animation is completly done in CSS, so please make sure you import the CSS as well.

There are no other dependencies.

Installation

    npm i tileslider 

or

    yarn add tileslider 

Usage

import as module

    //import javascript
    import tileslider from 'tileslider'
    //import css
    import 'tileslider/tileslider.css'

Vanilla JS

In your HTML add a div with the class tileslider and place two child-divs inside with class slide. Place your content inside of the the slides.

  <div class="tileslider">
    <div class="slide">
        <!-- add some content -->
    </div>
    <div class="slide">
        <!-- add some content -->
    </div>
  </div>

Place the main-function of the slider somewhere in your JavaScript code:

    tileslider();

Functions

Basic

This is the basic start. The slider is static and will not slide automatically

    tileslider();

Automatic

Use this to activate the automatic slide feature.

    tileslider({
        auto: true
    });

Specify the speed of the autoslide

    tileslider({
        auto: true,
        interval: 5000
    });

The 5000 will let the slider slide automatically after 5sec (5000 milliseconds).

Custom Classes

Set custom classes for the main slider as well as the slides themselves. CAUTION If you use custom classes, the CSS styles will no longer work. So you have to write you own CSS for style and transitions.

    tileslider({
        mainClass: ".slider",
        slideClass: ".tile"
    });