Адаптивный слайдер с Fade In эффектом
<!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"><</button>
<button class="controls" id="next">></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>