Author: | Loyen |
---|---|
Views Total: | 3,469 views |
Official Page: | Go to website |
Last Update: | April 13, 2015 |
License: | MIT |
Preview:

Description:
A vanillas JavaScript slider to help you display any Html elements with various transition/easing effects.
How to use it:
Wrap your content e.g. images into DIV elements as children slides for the slider:
<div id="fadeSlider" class="sliderWrapper"> <div class="slider"> <div class="slide"><img src="https://unsplash.it/600/400?image=529"></div> <div class="slide"><img src="https://unsplash.it/600/400?image=539"></div> <div class="slide"><img src="https://unsplash.it/600/400?image=549"></div> <div class="slide"><img src="https://unsplash.it/600/400?image=559"></div> </div> </div>
The basic CSS styles for the slider & navigation.
.sliderWrapper { box-shadow: 0 0 40px 10px #000; height: 140px; margin: 0 auto; overflow: hidden; position: relative; width: 320px; } .sliderWrapper .slider { background: #aaa; overflow: hidden; height: 100%; position: relative; width: 100%; } .sliderWrapper .slider .slide { display: none; height: 100%; position: absolute; width: 100%; } .sliderWrapper .slider .slide img { width: 100%; height: 100%; } .sliderWrapper .slider-directions .slider-directions-prev, .sliderWrapper .slider-directions .slider-directions-next { cursor: pointer; background: #eee; color: #333; height: 48px; position: absolute; top: 35%; width: 24px; z-index: 10; box-shadow: 0; transition-property: left, right, box-shadow; transition-duration: 0.5s; transition-timing-function: ease; } .sliderWrapper .slider-directions .slider-directions-prev:after, .sliderWrapper .slider-directions .slider-directions-next:after { content: 'O'; display: block; line-height: 48px; } .sliderWrapper .slider-directions .slider-directions-prev { left: -24px; } .sliderWrapper:hover .slider-directions .slider-directions-prev { left: 0; box-shadow: 0 0 8px 0 rgba(0,0,0,0.8); } .sliderWrapper .slider-directions .slider-directions-prev:after { content: '«'; } .sliderWrapper .slider-directions .slider-directions-next { right: -24px; } .sliderWrapper:hover .slider-directions .slider-directions-next { right: 0; box-shadow: 0 0 8px 0 rgba(0,0,0,0.8); } .sliderWrapper .slider-directions .slider-directions-next:after { content: '»'; } .sliderWrapper .slider-navigation { bottom: -24px; color: #333; left: 2px; position: absolute; z-index: 10; transition-property: bottom; transition-duration: 0.5s; transition-timing-function: ease; } .sliderWrapper:hover .slider-navigation { bottom: 2px; } .sliderWrapper .slider-navigation .slider-navigation-item { cursor: pointer; background: #eee; border-radius: 100%; box-shadow: 0; display: inline-block; float: left; height: 12px; margin-left: 2px; margin-right: 2px; text-indent: -9999px; width: 12px; transition-property: box-shadow; transition-duration: 0.5s; transition-timing-function: ease; } .sliderWrapper:hover .slider-navigation .slider-navigation-item { box-shadow: 0 0 8px 0 rgba(0,0,0,0.8); } .sliderWrapper .slider-navigation .slider-navigation-item.active { background: #333; color: #eee; }
Load the needed slider.js
at the bottom of your webpage.
<script src="js/slider.js"></script>
Initialize the slider and specify the transition effect you want to use.
var demoSlider = new slider('#demoSlider', { // options transition: { effect: 'fadeIn', easing: 'linear' } });
All the default options.
var demoSlider = new slider('#demoSlider', { // CSS classes classes: { navigation: 'slider-navigation', navigationItem: 'slider-navigation-item', direction: 'slider-directions', directionPrev: 'slider-directions-prev', directionNext: 'slider-directions-next', slider: 'slider', slide: 'slide', }, // default transition options transition: { duration: 800, // fadeIn, slideInTop, slideInRight, slideInBottom, slideInLeft, slideInTopLeft, slideInTopRight, slideInBottomLeft, slideInBottomRight, slideInVertical, slideInHorizontal, slideInVerticalReversed, slideInHorizontalReversed effect: 'slideInHorizontal', easing: 'easeInOutExpo' }, pause: 2000, autoRun: true, random: false, direction: true, navigation: true });