GL-Slider

How to use

Add CSS file:

<link rel="stylesheet" href="./your/path/to/build/gl-slider.css">

Add JS file:

<script src="./your/path/to/build/gl-slider.js">

or es6 import in your bundler system:

import webglSlider from "./your/path/to/build/gl-slider.module.js";

Add markup:

<div class="gl-slider" id="slider">
    <div class="gl-slider__item" data-item><img src="./your/path/to/images/img1.jpg" alt=""></div>
    <div class="gl-slider__item" data-item><img src="./your/path/to/images/img2.jpg" alt=""></div>
    <div class="gl-slider__item" data-item><img src="./your/path/to/images/img4.jpg" alt=""></div>
    <div class="gl-slider__item" data-item><img src="./your/path/to/images/img7.jpg" alt=""></div>
    <div class="gl-slider__item" data-item><img src="./your/path/to/images/img8.jpg" alt=""></div>
</div>

Initialize and Options:

let slider = new glSlider(document.getElementById('slider'), {
    arrows: true,             // Boolean (default - true)
    dots: false,              // Boolean (default - false)
    preloader: true,          // Boolean (default - true)

    autoplay: false,          // Boolean (default - false)
    autoplaySpeed: 3000,      // Number (default - 3000)

    startItem: 0,             // Number (defaul - 0)
    animationSpeed: 800,      // Number (default - 500)

    renderInView: true, // render only when slider visible (Used Intersection Observer API )

    effects: {
        filter: 'base',        // String ( defaul - base | monochrome | negative | sepia )
        slide: 'zoomBlur'      // String ( defaul - base | zoomBlur | fragmentParalax | wave )
    }
});