Fragmented slider based on canvas and GSAP

• Tested on browsers: IE11, FF 52+, Chrome 60+, Opera 50+, YandexBrowser 14.12, Safari 10+
• Vanilla JS
• Fully customize elements
• ~30 kb not minified

UPD. 1.0.13

Reinit on every resize window

Demo

Usage

Create wrapper:

<div class="your-class-name"></div>

Add data-images string with url to images separated by coma:

<div class="your-class-name" data-images='https://images.unsplash.com/XXXYYYSDDSS.png, assets/images/sample.jpg'></div>

! IMPORTANT ! At least 2 images required. *Canvas element will have your container full size.

Install GSAP dependency:

npm i -S gsap

Install npm module:

npm i -S canvas-slider

If you use ES6 modules:

// import module
import Slider from  'canvas-slider;
// init
new Slider('your-class-name(selector)'[, { params }]);

Options

| Option | Default value| | ------ | ------ | | linesColor | 'rgba(120,120,120,0.5)' | | smallLineColor | 'rgba(56,177,56,0.8)' | | slideNumberSeparatorColor | 'rgba(255,255,255,0.8)' | | slideNumberColor | 'rgba(56,177,56,0.8)' | | slideNumberFontSize | 26 | | slideNumberFontFamily | 'RobotoLight' | | rightText | 'S C R O L L D O W N' | | rightTextFontSize | 12 | | rightTextFontFamily | Gilroy | | rightTextOffsetLeft | 95 | | rightTextOffsetTop | 93 | | rightTextAlign | right | | overlayFirstColor | #000 | | overlaySecondColor | #000 | | overlayOpacity | 0.5 | | showNav | true | | autoPlaySpeed | 2000 | | animationSpeed | 3 | | firstAnimationSpeed | 3 |

Example

new Slider('.my-wrapper', {
    linesColor: '#000',
    showNav: false,
    slideNumberColor: 'rgba(0,0,0,0)' // just set alpha 0 to hide elem
});

Gradient overlay

Play with overlayFirstColor, overlaySecondColor and overlayOpacity to create gradient overlay:

new Slider('.my-wrapper', {
    overlayFirstColor: 'red',
    overlaySecondColor: 'green'
});

Navigation

JS append navigation dots into your wrapper:

<ul class="navContainer">
    <li class="navItem">
        <a href="#" class="navLink"></a>
    </li>
    <li class="navItem active">
        <a href="#" class="navLink"></a>
    </li>
</ul>

To styling and operating with them use CSS. Example:

.slider-wrapper {
  width: 100%;
  position: relative;
  height: 100vh;
}

.navContainer {
  position: absolute;
  left: 10%;
  bottom: 6%;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  z-index: 2;
  -webkit-animation: showContainer 0.5s ease;
  animation: showContainer 0.5s ease;
  -webkit-animation-fill-mode: forwards;
  animation-fill-mode: forwards;
}

.navLink {
  display: block;
  width: 5px;
  height: 5px;
  background-color: #fff;
  opacity: .6;
  transition: .5s;
}

.navItem {
  margin-right: 5px;
  display: inline-block;
  padding: 10px;
  cursor: pointer;
}

.navItem.active .navLink {
  background-color: #38b138;
}

Have a nice day!