slider/slider_test.html at master · flo2517/slider · GitHub

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
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="slider.css">
    <title>Slider</title>
</head>
<body>
    <div class="container">
        <input type="radio" id="i1" name="images" checked />
        <input type="radio" id="i2" name="images" />
        <input type="radio" id="i3" name="images" />
        <input type="radio" id="i4" name="images" />
        <input type="radio" id="i5" name="images" />

        <div class="slide_img" id="one">
            <img src="http://www.bhmpics.com/wallpapers/little_pony_art-800x480.jpg" alt="one">
            <label class="prev" for="i5"><span>&#x2039;</span></label>
            <label class="next" for="i2"><span>&#x203a;</span></label>
        </div>
        <div class="slide_img" id="two">
            <img src="https://preview.ibb.co/e5OShF/cropped_800_480_111290.jpg " alt="two">
            <label class="prev" for="i1"><span>&#x2039;</span></label>
            <label class="next" for="i3"><span>&#x203a;</span></label>
        </div>
        <div class="slide_img" id="three">
            <img src="https://cdn.pixabay.com/photo/2017/02/22/17/02/beach-2089936_960_720.jpg" alt="three">
            <label class="prev" for="i2"><span>&#x2039;</span></label>
            <label class="next" for="i4"><span>&#x203a;</span></label>
        </div>
        <div class="slide_img" id="four">
            <img src="https://cdn.pixabay.com/photo/2015/11/16/16/28/bird-1045954_960_720.jpg" alt="four">
            <label class="prev" for="i3"><span>&#x2039;</span></label>
            <label class="next" for="i5"><span>&#x203a;</span></label>
        </div>
        <div class="slide_img" id="five">
            <img src="https://cdn.pixabay.com/photo/2017/03/02/16/54/iceland-2111811_960_720.jpg" alt="five">
            <label class="prev" for="i4"><span>&#x2039;</span></label>
            <label class="next" for="i1"><span>&#x203a;</span></label>
        </div>
        <div id="nav_slide">
            <label for="i1" class="dots" id="dot1"></label>
            <label for="i2" class="dots" id="dot2"></label>
            <label for="i3" class="dots" id="dot3"></label>
            <label for="i4" class="dots" id="dot4"></label>
            <label for="i5" class="dots" id="dot5"></label>
        </div>
    </div>
</body>
</html>