html
html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
<!DOCTYPE html>
<html>
<head>
<title>Simple slider</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link href="https://fonts.googleapis.com/css?family=Dosis:600" rel="stylesheet">
</head>
<body>
<!-- Thanks, Brad! -->
<div class="wrap">
<div id="arrow-left" class="arrow"></div>
<div id="slider">
<div class="slide slide1">
<div class="slide-content">
<span>Slide one</span>
</div>
</div>
<div class="slide slide2">
<div class="slide-content">
<span>Slide two</span>
</div>
</div>
<div class="slide slide3">
<div class="slide-content">
<span>Slide three</span>
</div>
Enter to Rename, Shift+Enter to Preview
css
css
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
body, .wrap, #slider, .slide-content {
margin: 0;
padding: 0;
height: 100vh;
overflow-x: hidden;
width: 100%;
}
.wrap {
position: relative;
}
.slide {
color: #b6bec9;
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}
.slide1 {
background-image: url("https://picsum.photos/800?image=823");
}
.slide2 {
background-image: url("https://picsum.photos/800?image=628");
}
.slide3 {
background-image: url("https://picsum.photos/800?image=454");
}
.slide4 {
background-image: url("https://picsum.photos/800?image=435");
}
Enter to Rename, Shift+Enter to Preview
js
js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
window.onload = function() {
let slides = document.querySelectorAll('.slide'),
arrowL = document.querySelector('#arrow-left'),
arrowR = document.querySelector('#arrow-right'),
curr = 0;
// Clear all images
let reset = function() {
for(let i = 0; i < slides.length; i++) {
slides[i].style.display = 'none';
}
};
// Initialize slider
function startSliding() {
reset();
slides[0].style.display = 'block';
}
// Show previous
function slideLeft() {
reset();
slides[curr - 1].style.display = 'block';
curr--;
}
// Show next
Enter to Rename, Shift+Enter to Preview
BROWSER
Console
Run