Smooth Slider JS

index.html

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

script.js

'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.markdown

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.

style.css

* {
	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;
	}
}