Pure CSS Responsive 2ways 3D Image Slider v3+ [JS enhanced: auto-slide + swipe + arrow keys control]
0

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>Pure CSS Responsive 2-ways 3D Image Slider v3+ [JS enhanced: auto-slide + swipe + arrow keys control]</title>
</head>
<body>
<main>
<header>
<h1>Pure CSS Responsive 2-ways 3D Image Slider v3+</h1>
<h2>[JS enhanced: auto-slide + swipe + arrow keys control]</h2>
<h3>(work still without JS, but without enhancements)</h3>
</header>
<div id="preload">
<img src="http://cdn.geekwire.com/wp-content/uploads/2015/10/shutterstock_84325633-620x414.jpg" alt="">
<img src="https://fightyourrival.files.wordpress.com/2012/03/bigtwobanner.jpg" alt="">
<img src="http://www.diabetes.co.uk/images/article_images/big-three.jpg" alt="">
<img src="http://www.guengl.eu/uploads/news-images/Screen_Shot_2017-07-05_at_10.30.00_AM.png" alt="">
<h2>Loading...</h2>
</div>
<div id="slider">
<input type="radio" name="scmd" id="slide1p" class="rev">
<input type="radio" name="scmd" id="slide1n" checked>
<input type="radio" name="scmd" id="slide2p" class="rev">
<input type="radio" name="scmd" id="slide2n">
<input type="radio" name="scmd" id="slide3p" class="rev">
<input type="radio" name="scmd" id="slide3n">
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 {
font-family:sans-serif;
font-size:2vw;
margin:0;
}
/* added page container to horizontal crop for v2: perspective avoiding horizontal scroll */
main {
overflow:hidden;
}
h1, h2, h3 {
font-size:2em;
text-align:center;
}
h2 {
font-size:1.5em;
}
h3 {
font-size:1.2em;
}
#slider {
font-size:5vmin;
position:relative;
width:70vw;
margin:auto;
height:50vw;
text-align:center;
/* background:yellow;*/
/*overflow:hidden; v2: disable croping*/
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
// few lines of JS to handle auto slide and preload hiding :P
// (if no js, slider buttons still working)
document.addEventListener('DOMContentLoaded',function() {
var timer; // setTimeout id
var rev = false;
var slider = document.getElementById('slider');
var slides = document.querySelectorAll('#slider>.slide');
var radios = document.querySelectorAll('#slider>input[type="radio"]');
function autoslide() { // auto-slide handler
var r = slides.length;
while (r--) {
if ((radios[r*2].checked)||(radios[r*2+1].checked)) {
if (!rev) r = ++r%slides.length;
else if (!r--) r = slides.length-1;
radios[(rev)?r*2:r*2+1].click();
break;
}
}
}
function reset() {
if (timer) {
clearTimeout(timer);
start();
}
Enter to Rename, Shift+Enter to Preview
BROWSER
Console
Run