1.0.17 • Published 6 years ago
canvas-slider v1.0.17
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 |
bashowNav | 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;
}