Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Smooth Slider JS
button(type='button' class='button-nav prev') ↑
button(type='button' class='button-nav next') ↓
#main
section.section-slides.one.active
| Slider plugin
section.section-slides.two
| Vanilla JS
section.section-slides.three
| Made with ♥ by vanderlanth
'use strict';
var Slides = function(options) {
var defaults = {
element : '.section-slides',
scroll : true,
key : true,
button : true
};
if (arguments[0] && typeof arguments[0] === 'object') {
this.options = _extendDefaults(defaults, arguments[0]);
}
this.element = this.options.element;
this.elements = document.querySelectorAll(this.element);
this.scroll = this.options.scroll;
this.key = this.options.key;
this.button = this.options.button;
this.currentLoop = 0;
this.isMoving = false;
this.documentPos = document.body.scrollTop;
this.activePos = document.querySelector('.active').offsetTop;
this.compare = [];
this.requestId;
};
function _extendDefaults(source, properties) {
var property;
for (property in properties) {
if (properties.hasOwnProperty(property)) {
source[property] = properties[property];
}
}
return source;
}
Slides.prototype = {
_getElement: function() {
var elements = [];
var i, thisElement;
elements = document.querySelectorAll(this.element);
for (i = 0; i < elements.length; i++){
thisElement = elements[i];
thisElement.style.height = '100vh';
thisElement.style.width = '100vw';
}
},
_scrollDown: function() {
var i, thisElement, j;
for(i = 0; i < this.elements.length; i++){
thisElement = this.elements[i];
if(thisElement.classList.contains('active')){
var currentItemIndex = getIndexOfElementInParent(thisElement);
thisElement.classList.remove('active');
if(currentItemIndex < this.elements.length-1){
j = currentItemIndex+1;
this.elements[j].classList.add('active');
this.isMoving = true;
this._scrollToTarget();
return false;
}
else if (currentItemIndex === this.elements.length-1){
j = this.elements.length-1;
this.elements[j].classList.add('active');
this._scrollToTarget();
return false;
}
}
}
},
_scrollUp: function() {
var i, thisElement, j;
for(i = 0; i < this.elements.length; i++){
thisElement = this.elements[i];
if(thisElement.classList.contains('active')){
var currentItemIndex = getIndexOfElementInParent(thisElement);
thisElement.classList.remove('active');
if(currentItemIndex > 0){
j = currentItemIndex-1;
this.elements[j].classList.add('active');
this.isMoving = true;
this._scrollToTarget();
return false;
}
else if (currentItemIndex === 0){
j = 0;
this.elements[j].classList.add('active');
this._scrollToTarget();
return false;
}
}
}
},
_isMoving: function() {
if(this.isMoving === true ){
document.body.style.overflow = 'hidden';
}else{
return false;
}
},
_scrollToTarget: function() {
var self = this;
this._isMoving();
this.documentPos = document.body.scrollTop;
this.activePos = document.querySelector('.active').offsetTop;
this.requestId = requestAnimationFrame(function() {
self._scrollToTarget();
if(self.activePos > self.documentPos + 50){
self.documentPos = self.documentPos + 25;
window.scrollTo(0, self.documentPos);
self.compare = [];
}
if(self.activePos < self.documentPos - 50){
self.documentPos = self.documentPos - 25;
window.scrollTo(0, self.documentPos);
self.compare = [];
}
if (self.documentPos + 50 >= self.activePos && self.documentPos - 50 <= self.activePos) {
self.stop();
window.scrollTo(0, self.activePos);
self.compare = [];
self.isMoving = false;
setTimeout(function(){
document.body.style.overflow = 'scroll';
}, 900);
return false;
}
});
},
init: function() {
this._getElement();
},
stop: function() {
window.cancelAnimationFrame(this.requestId);
}
};
function getIndexOfElementInParent(element){
var parent = element.parentNode;
for (var index = 0; index <= parent.children.length - 1; index++){
if(parent.children[index] === element){
return index;
}
}
};
//init
var slide = new Slides({});
slide.init();
//events
window.addEventListener('keydown', function(event){
event.preventDefault();
if(event.keyCode == 40 && document.body.scrollTop === document.querySelector('.active').offsetTop){
slide._scrollDown();
}
else if(event.keyCode == 38 && document.body.scrollTop === document.querySelector('.active').offsetTop){
slide._scrollUp();
}
},false);
document.addEventListener('click', function(event){
event.preventDefault();
if(event.target.classList.contains('next')){
slide._scrollDown();
}
if(event.target.classList.contains('prev')){
slide._scrollUp();
}
}, false);
window.addEventListener('scroll', function(event){
event.preventDefault();
slide.compare.push(document.body.scrollTop);
if(slide.compare.length > 2){
slide.compare.shift();
if(slide.compare[0] < slide.compare[1]){
slide._scrollDown();
}
else{
slide._scrollUp();
}
}
}, false);

Smooth Slider JS

Hey ! Here's a little Vanilla JS Plugin for smooth scrolling between slides. Hope you like it :) Made with love, obviously !

A Pen by Nicolas Lanthemann on CodePen.

License.

* {
margin: 0;
padding: 0;
}
html, body {
//overflow:hidden;
width: 100vw;
font-family: sans-serif;
font-size: 70px;
font-weight: bolder;
color: white;
text-align: center;
font-size: 12px;
font-weight: 100;
text-transform: uppercase;
letter-spacing: 9px;
}
.section-slides {
display: flex;
justify-content: center;
align-items: center;
}
.one {
background-color: hsl(0, 90%, 70%);
}
.two {
background-color: hsl(10, 90%, 70%);
}
.three {
background-color: hsl(20, 90%, 70%);
}
button {
cursor: pointer;
position: fixed;
right: 0;
bottom: 0;
display: flex;
width: 40px;
height: 40px;
background-color: white;
border: 1px solid #eee;
justify-content: center;
transition: .275s ease all;
&.prev{
bottom: 40px;
}
&:hover{
background-color: #ddd;
}
&:focus{
outline: none;
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment