javascript/corousel.html at master · prachisharma02/javascript · 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
51
52
53
54
55
56
57
58
59
60
<!DOCTYPE html>
<html lang="en">
<head>
   <title>corousel</title>
   <link rel="stylesheet" href="corousel.css">
   <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.2/css/all.min.css">
</head>
<body>
    <header class="header"></header>
<section class="corousel">
    <div class="button">

        <div class="move" onclick="prevSlide()">
            <i class="fa-solid fa-angle-left"></i></div>
        <div class="move" onclick="nextSlide()">
            <i class="fa-solid fa-angle-right"></i>
        </div>


    </div>
    <div class="indicators">

        <p onclick="moveToslide(1)"></p>
        <p onclick="moveToslide(2)"></p>
        <p onclick="moveToslide(3)"></p>
        <p onclick="moveToslide(4)"></p>
        <p onclick="moveToslide(5)"></p>

    </div>
    <div class="slider">
    <div class="sliderchild">
        <img src="C:\Users\prach\Downloads\pexels-johannes-plenio-1133491 (3).jpg">
    </div>

            <div class="sliderchild">
        <img src="C:\Users\prach\Downloads\pexels-jacob-colvin-1757363.jpg">
    </div>

    <div class="sliderchild">
        <img src="C:\Users\prach\Downloads\pexels-lumn-167699.jpg">
    </div>
    <div class="sliderchild">
    <img src="C:\Users\prach\Downloads\pexels-jaime-reimer-2662116.jpg">
    </div>
    <div class="sliderchild">
        <img src="C:\Users\prach\Downloads\pexels-johannes-plenio-1133491 (3).jpg">
    </div>
</div>

</section>


 <script src="./corousel.js"></script>
</body>
</html>