Slider Fade

In this example below you will see how to do a Slider Fade with some HTML / CSS and Javascript

Thumbnail
This awesome code was written by DM_Daria, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright DM_Daria ©

Technologies

  • HTML
  • CSS
  • JavaScript
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>Slider Fade</title>
  
  
  <link rel='stylesheet prefetch' href='https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css'>

      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>

  <div class="slider" id="main-slider"><!-- outermost container element -->
	<div class="slider-wrapper"><!-- innermost wrapper element -->
		<img src="http://demos-pirftc7xlgm3gz2xr9zm.stackpathdns.com/infinite/wp-content/uploads/2016/06/slider-1.jpg" alt="First" class="slide" /><!-- slides -->
		<img src="http://demos-pirftc7xlgm3gz2xr9zm.stackpathdns.com/infinite/wp-content/uploads/2016/06/slider-2.jpg" alt="Second" class="slide" />
		<img src="http://lorempixel.com/1024/400/city" alt="Third" class="slide" />
	</div>
	<div class="slider-nav"><!-- "Previous" and "Next" actions -->
		<button class="slider-previous"><i class="fa fa-angle-left" aria-hidden="true"></i></button>
		<button class="slider-next"><i class="fa fa-angle-right" aria-hidden="true"></i></button>
	</div>
</div>
  
  

    <script  src="js/index.js"></script>




</body>

</html>

/*Downloaded from https://www.codeseek.co/DM_Daria/slider-fade-rWOPrV */
html,body {
	margin: 0;
	padding: 0;
}
.slider {
	width: 100%;
}

.slider-wrapper {
	width: 100%;
	height: 100vh;
	position: relative;
}

.slide {
	float: left;
	position: absolute;
	width: 100%;
	height: 100%;
	opacity: 0;
	transition: opacity 500ms linear;
}

.slider-wrapper > .slide:first-child {
	opacity: 1;
}

.slider-nav {
	height: 40px;
	width: 100%;
	margin-top: 1.5em;
  
}

.slider-nav button {
  position:absolute;
  top:50%;
	border: none;
	cursor: pointer;
	background-color: transparent;
}
.slider-nav i.fa-angle-left, .slider-nav i.fa-angle-right{
  font-size:40px;
  color:#fff;
  z-index:99999
}
.slider-nav button:focus {
	outline-style: none;
}

.slider-nav button.slider-previous {
	left:2%;

}

.slider-nav button.slider-next {
	right:2%;
}	


/*Downloaded from https://www.codeseek.co/DM_Daria/slider-fade-rWOPrV */
(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.actions();	
    
		},
		_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;
				}
			}
		},
		actions: function() {
			var self = this;
			self.next.addEventListener( "click", function() {
				self.index++;
				self.previous.style.display = "block";
				
				if( self.index == self.total - 1 ) {
					self.index = self.total - 1;
					self.next.style.display = "none";
				}
				
				self._slideTo( self.index );
				
			}, false);
			
			self.previous.addEventListener( "click", function() {
				self.index--;
				self.next.style.display = "block";
				
				if( self.index == 0 ) {
					self.index = 0;
					self.previous.style.display = "none";
				}
				
				self._slideTo( self.index );
				
			}, false);
		}
		
		
	};
	
	document.addEventListener( "DOMContentLoaded", function() {
		
		var slider = new Slideshow( "#main-slider" );
		
	});
	
})();

Comments