<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title>SIMPLE YET EFFICIENT SLIDESHOW</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<head>
<link href="https://fonts.googleapis.com/css?family=Oswald" rel="stylesheet">
</head>
<div class="title">
<h2>Simple yet efficient <span class="red">slideshow</span></h2>
</div>
<div class="content">
<div class="slider">
<div class="image">
<img src="https://images.pexels.com/photos/110874/pexels-photo-110874.jpeg?h=350&auto=compress" alt="" />
</div>
<div class="image">
<img src="https://images.pexels.com/photos/68357/pexels-photo-68357.jpeg?h=350&auto=compress&cs=tinysrgb" alt="" />
</div>
<div class="image">
<img src="https://images.pexels.com/photos/30461/pexels-photo-30461.jpg?h=350&auto=compress&cs=tinysrgb" alt="" />
</div>
<div class="image">
<img src="https://images.pexels.com/photos/243971/pexels-photo-243971.jpeg?h=350&auto=compress&cs=tinysrgb" alt="" />
</div>
<div class="image">
<img src="https://images.pexels.com/photos/6544/person-woman-hand-rainy.jpeg?h=350&auto=compress" alt="" />
</div>
</div>
<!-- <a href="#" onclick="previous()" id="previous" class="on"><</a>
<a href="#" onclick="next()" id="next" class="on">></a> -->
<a href="#" id="previous" class="previousOn"><</a>
<a href="#" id="next" class="nextOn">></a>
</div>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js'></script>
<script src="js/index.js"></script>
</body>
</html>
/*Downloaded from https://www.codeseek.co/chriskirsch/simple-yet-efficient-slideshow-GrRqOG */
body {
background: #222;
margin:0;
padding:0;
font-family: 'Oswald', sans-serif;
}
.title {
width:300px;
margin:0 auto;
text-align:center;
color:#FFF;
transform:skew(-6deg);
text-transform:uppercase;
line-height:1.6em
}
.red {
color:crimson
}
.slider {
transition:all .3s ease;
left:0px;
position:absolute;
width:1500px;
}
.image {
width:300px;
height:300px;
overflow:hidden;
float:left;
}
.image img{
max-height: 100%;
min-width:100%;
display:block;
}
.content {
width:300px;
height:300px;
position:relative;
overflow:hidden;
margin:20px auto;
}
.content::after {
content :"";
position:absolute;
z-index:888;
border:2px solid #FFF;
top:10px;
left:10px;
bottom:10px;right:10px;
opacity:0.4;
}
#previous,#next {
font-size:58px;
color:white;
font-weight:bold;
/* font-family:sans-serif; */
text-decoration:none;
position:absolute;
opacity:.5;
z-index:999;
transition:all .2s ease;
}
#previous:hover {
left:12px;
opacity:.8;
}
#previous {
left: 20px;
top:50%;
transform: translateY(-50%);
}
#next {
right:20px;
top:50%;
transform: translateY(-50%);
}
#next:hover {
right:12px;
opacity:.8;
}
/*Downloaded from https://www.codeseek.co/chriskirsch/simple-yet-efficient-slideshow-GrRqOG */
function next() {
var sliderPos = $('.slider').position().left;
var galWidth = $('.slider').width();
if (-(sliderPos) <= galWidth-600) {
$('.slider').css('left', (sliderPos -300) + 'px');
} else {
$('.slider').css('left', (sliderPos - sliderPos) + 'px');
}
}
function previous() {
var sliderPos = $('.slider').position().left;
if (sliderPos < 0) {
$('.slider').css('left', (sliderPos +300) + 'px');
} else {
$('.slider').css('left', (sliderPos - sliderPos) + 'px');
}
}
$('#next').on('click', function() {
if ($(this).hasClass('nextOn')) {
$(this).removeClass('nextOn');
next();
}
clearTimeout(classBack);
var classBack = setTimeout(function() {
$('#next').addClass('nextOn');
}, 300)
})
$('#previous').on('click', function() {
if ($(this).hasClass('previousOn')) {
$(this).removeClass('previousOn');
previous();
}
clearTimeout(classBack);
var classBack = setTimeout(function() {
$('#previous').addClass('previousOn');
}, 300)
})