Seokky
10/10/2017 - 3:09 PM

Адаптивный слайдер с Fade In эффектом на js

Адаптивный слайдер с Fade In эффектом

sliderFadeIn
content_copyfile_download
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
			/*
	essential styles:
	these make the slideshow work
	*/
	#slides{
	    position: relative;
	    height: 600px;
	    padding: 0px;
	    margin: 0px auto;
	    list-style-type: none;
	}

	.slide{
	    position: absolute;
	    left: 0px;
	    top: 0px;
	    width: 100%;
	    height: 100%;
	    opacity: 0;
	    z-index: 1;

	    -webkit-transition: opacity 1s;
	    -moz-transition: opacity 1s;
	    -o-transition: opacity 1s;
	    transition: opacity 1s;
	}

	.showing{
	    opacity: 1;
	    z-index: 2;
	}


	.controls{
	    display: none;
	}


	/*
	non-essential styles:
	just for appearance; change whatever you want
	*/

	.slide{
	    font-size: 40px;
	    padding: 40px;
	    box-sizing: border-box;
	    background: #333;
	    color: #fff;
	  
	  background-size: cover;
	}

	/* http://unrestrictedstock.com/wp-content/uploads/snowy-winter-vignette-bokeh-night-snow-falling-free-stock-photo.jpg */
	.slide:nth-of-type(1){
	    background-color: red;
	  	background-image: url('img/1.jpg');
	  	background-size: 100% 100%;
	}

	/* http://www.dawghousedesignstudio.com/wp-content/uploads/2010/01/25/free-stock-photos-1.jpg */
	.slide:nth-of-type(2){
	    background-color: orange;
	    background-image: url('img/2.jpg');
	  	background-size: 100% 100%;
	}

	/* http://www.stockfreeimages.com/static/homepage/waterfall-free-stock-photo-244915.jpg */
	.slide:nth-of-type(3){
	    background-color: green;
	  	background-image: url('img/3.jpg');
	  	background-size: 100% 100%;
	}

	.controls{
	  background: #333;
	  color: #fff;
	  padding: 10px 0px;
	  font-size: 20px;
	  cursor: pointer;
	  border: none;
	  margin: 10px 0px 0px 10px;
	  width: 70px;
	}

	.controls:hover,
	.controls:focus{
	  background: #eee;
	  color: #333;
	}

	.container{
	  position: relative;
	  max-width: 900px;
	  margin: 0px auto;
	}
	#previous {
		position: absolute;
	    bottom: 300px;
	    left: -10px;
	    z-index: 10;
	    font-size: 20px;
	    margin: 0;
	}
	#next {
		position: absolute;
	    bottom: 300px;
	    right: -10px;
	    z-index: 10;
	    font-size: 20px;
	    margin: 0;
	}
	</style>
</head>
<body>
	<div class="container">
	  <ul id="slides">
	    <li class="slide showing"></li>
	    <li class="slide"></li>
	    <li class="slide"></li>
	  </ul>
	    <button class="controls" id="previous">&lt;</button>
	    <button class="controls" id="next">&gt;</button>
	</div>

	<script>
	var controls = document.querySelectorAll('.controls');
	for(var i=0; i<controls.length; i++){
	    controls[i].style.display = 'inline-block';
	}

	var slides = document.querySelectorAll('#slides .slide');
	var currentSlide = 0;

	function nextSlide(){
	    goToSlide(currentSlide+1);
	}

	function previousSlide(){
	    goToSlide(currentSlide-1);
	}

	function goToSlide(n){
	    slides[currentSlide].className = 'slide';
	    currentSlide = (n+slides.length)%slides.length;
	    slides[currentSlide].className = 'slide showing';
	}


	var next = document.getElementById('next');
	var previous = document.getElementById('previous');

	next.onclick = function(){
	    nextSlide();
	};
	previous.onclick = function(){
	    previousSlide();
	};
	</script>
</body>
</html>