<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta charset="UTF-8">
<title>JavaScript</title>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css" integrity="sha384-UHRtZLI+pbxtHCWp1t77Bi1L4ZtiqrqD80Kn4Z8NTSRyMA2Fd33n5dQ8lWUE00s/" crossorigin="anonymous">
</head>
<body>
<div class="wrapper">
<div class="image">
<img src="https://picsum.photos/1920/1280/?random" alt="" class="slide">
</div>
<div class="image">
<img src="https://picsum.photos/1920/1281/?random" alt="" class="slide">
</div>
<div class="image">
<img src="https://picsum.photos/1920/1282/?random" alt="" class="slide">
</div>
<div class="image">
<img src="https://picsum.photos/1920/1283/?random" alt="" class="slide">
</div>
</div>
<div>
<button id="left"><i class="fas fa-arrow-left"></i></button>
<button id="right"><i class="fas fa-arrow-right"></i></button>
</div>
</body>
</html>
* {
margin: 0;
padding: 0;
}
/* reset button */
button {
background: none;
border: none;
}
button:active, button:focus {
outline: none !important;
}
button::-moz-focus-inner {
border: 0 !important;
}
/* fullscreen div */
.image {
display: block;
width: 100%;
height: 100vh;
overflow: hidden;
}
/* button */
#left, #right {
position: absolute;
top: 50%;
font-size: 4rem;
color: #adb5bd;
opacity: 0.3;
}
#right {
right: 0;
}
/* button hover */
#left:hover, #right:hover {
opacity: 0.8;
transition: ease 0.5s;
}
var index = document.getElementsByClassName('image');
var length = index.length;
var slide = 0;
// we run through the collection of elements and assign display: none to them;
for (var i = 1; i < index.length; i++) {
index[i].style.display = 'none';
}
// button to the right;
document.getElementById('right').onclick = function Right () {
if(slide == length-1){
index[0].style.display = "block";
index[slide].style.display = "none";
slide = 0;
} else {
index[slide+1].style.display = "block";
index[slide].style.display = "none";
slide++;
}
}
// button to the left;
document.getElementById('left').onclick = function Left () {
if(slide <= 0) {
index[slide].style.display = "none";
slide = length;
slide--;
index[slide].style.display = "block";
} else {
index[slide].style.display = "none";
slide--;
index[slide].style.display = "block";
}
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.