Author: | electerious |
---|---|
Views Total: | 1,585 views |
Official Page: | Go to website |
Last Update: | March 28, 2016 |
License: | MIT |
Preview:

Description:
A Material Design inspired content slider with a cool gooey animation on navigation dots, made using JavaScript and CSS3.
How to use it:
Add your slide content together with navigation dots into the slider.
<div class="slider" data-pos="0"> <div class="slider__slides"> <div class="slider__slide"></div> <div class="slider__slide"></div> <div class="slider__slide"></div> <div class="slider__slide"></div> </div> <div class="slider__dots"> <a href="#" class="slider__indicator"></a> <a href="#" class="slider__dot" data-pos="0"></a> <a href="#" class="slider__dot" data-pos="1"></a> <a href="#" class="slider__dot" data-pos="2"></a> <a href="#" class="slider__dot" data-pos="3"></a> </div> </div>
The core CSS/CSS3 for the slider.
.slider { position: relative; width: 100%; height: 100%; overflow: hidden; } .slider__slides { position: relative; width: 400%; height: 100%; -webkit-transition: -webkit-transform 0.3s cubic-bezier(0.51, 0.92, 0.24, 1); transition: -webkit-transform 0.3s cubic-bezier(0.51, 0.92, 0.24, 1); transition: transform 0.3s cubic-bezier(0.51, 0.92, 0.24, 1); transition: transform 0.3s cubic-bezier(0.51, 0.92, 0.24, 1), -webkit-transform 0.3s cubic-bezier(0.51, 0.92, 0.24, 1); will-change: transform; } .slider[data-pos="0"] .slider__slides { -webkit-transform: translateX(0%); transform: translateX(0%); } .slider[data-pos="1"] .slider__slides { -webkit-transform: translateX(-25%); transform: translateX(-25%); } .slider[data-pos="2"] .slider__slides { -webkit-transform: translateX(-50%); transform: translateX(-50%); } .slider[data-pos="3"] .slider__slides { -webkit-transform: translateX(-75%); transform: translateX(-75%); } .slider__slide { float: left; width: 25%; height: 100%; } .slider__dots { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; position: absolute; bottom: 1.5em; left: 50%; -webkit-transform: translateX(-50%); transform: translateX(-50%); } .slider__dot, .slider__indicator { display: block; margin: 0 0.5em; width: 1em; height: 1em; background: rgba(255, 255, 255, 0.5); border-radius: 100px; } .slider__indicator { position: absolute; background: white; width: auto; } .slider__indicator--left { -webkit-transition: left 0.3s cubic-bezier(0.51, 0.92, 0.24, 1.15), right 0.3s 0.1s cubic-bezier(0.51, 0.92, 0.24, 1.15); transition: left 0.3s cubic-bezier(0.51, 0.92, 0.24, 1.15), right 0.3s 0.1s cubic-bezier(0.51, 0.92, 0.24, 1.15); } .slider__indicator--right { -webkit-transition: left 0.3s 0.1s cubic-bezier(0.51, 0.92, 0.24, 1.15), right 0.3s cubic-bezier(0.51, 0.92, 0.24, 1.15); transition: left 0.3s 0.1s cubic-bezier(0.51, 0.92, 0.24, 1.15), right 0.3s cubic-bezier(0.51, 0.92, 0.24, 1.15); } .slider[data-pos="0"] .slider__indicator { left: 0em; right: 6em; } .slider[data-pos="1"] .slider__indicator { left: 2em; right: 4em; } .slider[data-pos="2"] .slider__indicator { left: 4em; right: 2em; } .slider[data-pos="3"] .slider__indicator { left: 6em; right: 0em; }
The core JavaScript to active the slider.
var dots = 4; var sliderElem = document.querySelector('.slider'); var dotElems = sliderElem.querySelectorAll('.slider__dot'); var indicatorElem = sliderElem.querySelector('.slider__indicator'); Array.prototype.forEach.call(dotElems, function (dotElem) { dotElem.addEventListener('click', function (e) { var currentPos = parseInt(sliderElem.getAttribute('data-pos')); var newPos = parseInt(dotElem.getAttribute('data-pos')); var newDirection = newPos > currentPos ? 'right' : 'left'; var currentDirection = newPos < currentPos ? 'right' : 'left'; indicatorElem.classList.remove('slider__indicator--' + currentDirection); indicatorElem.classList.add('slider__indicator--' + newDirection); sliderElem.setAttribute('data-pos', newPos); }); });
How to make this autoplay?
With some Javascript
Here’s a polymer element that does it.
https://github.com/Link2Twenty/l2t-paper-slider