kapono4466 Goto Github PK

		}
		
		#open {
			color: white;
			left: 1000px;
		}
		/*.sidenav {
left:0;
height: 100%;
width: 0;
position: fixed;
z-index: 1;
top: 0;
right: -20;ht
background-color: white;
overflow-x: hidden;
transition: 5s;

	div {
		color: #FF6600;
		
	}
	body{
		text-align: center;
	}
		html,body {
margin: 0;
padding: 0;

	(function() {

function Slideshow( element ) {
	this.el = document.querySelector( element );
	this.init();
}

Slideshow.prototype = {
	init: function() {
		this.wrapper = this.el.querySelector( ".slider-wrapper" );
		this.slides = this.el.querySelectorAll( ".slide" );
		this.previous = this.el.querySelector( ".slider-previous" );
		this.next = this.el.querySelector( ".slider-next" );
		this.index = 0;
		this.total = this.slides.length;
		this.timer = null;
		
		this.action();
		this.stopStart();	
	},
	_slideTo: function( slide ) {
		var currentSlide = this.slides[slide];
		currentSlide.style.opacity = 1;
		
		for( var i = 0; i < this.slides.length; i++ ) {
			var slide = this.slides[i];
			if( slide !== currentSlide ) {
				slide.style.opacity = 0;
			}
		}
	},
	action: function() {
		var self = this;
		self.timer = setInterval(function() {
			self.index++;
			if( self.index == self.slides.length ) {
				self.index = 0;
			}
			self._slideTo( self.index );
			
		}, 3000);
	},
	stopStart: function() {
		var self = this;
		self.el.addEventListener( "mouseover", function() {
			clearInterval( self.timer );
			self.timer = null;
			
		}, false);
		self.el.addEventListener( "mouseout", function() {
			self.action();
			
		}, false);
	}
	
	
};

document.addEventListener( "DOMContentLoaded", function() {
	
	var slider = new Slideshow( "#main-slider" );
	
});

<br>