nimdolphin · nimdolphin · Jan 1, 2023 · Jan 13, 2023 · kathrynowy · Feb 20, 2023
diff --git a/img/photo1.jpg b/img/photo1.jpg
diff --git a/img/photo2.jpg b/img/photo2.jpg
diff --git a/img/photo3.jpg b/img/photo3.jpg
diff --git a/img/photo4.jpg b/img/photo4.jpg
diff --git a/img/photo5.jpg b/img/photo5.jpg
diff --git a/img/photo6.jpg b/img/photo6.jpg
diff --git a/index.css b/index.css
@@ -0,0 +1,60 @@
+.arcticmonkeys {
+ position: relative;
+ width: 503px;
+ margin: auto;
+ padding: 40px;
+ display: none;
+}
+
+.btn-left {
+ position: absolute;
+ top: 48%;
+ left: 34%;
+ transform: translate(-53%, -53%);
+ background-image: url(./svg/left.png);
+ background-repeat: no-repeat;
+ width: 40px;
+ height: 40px;
+ border-radius: 20%;
+ outline: none;
+ border: none;
+ background-color: black;
+}
+
+.btn-left:hover {
+ background-color: white;
+}
+
+.btn-right {
+ position: absolute;
+ top: 48%;
+ right: 31%;
+ transform: translate(-53%, -53%);
+ background-image: url(./svg/right.png);
+ background-repeat: no-repeat;
+ width: 40px;
+ height: 40px;
+ border-radius: 20%;
+ outline: none;
+ border: none;
+ background-color: black;
+}
+
+.btn-right:hover {
+ background-color: white;
+}
+
+.point {
+ top: 50%;
+ left: 50%;
+ border-radius: 50%;
+ width: 15px;
+ height: 15px;
+ background-color: BlanchedAlmond;
+ display: inline-block;
+ text-align: center;
+}
+
+#main {
+ text-align: center;
+}
diff --git a/index.html b/index.html
@@ -0,0 +1,27 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+ <meta charset="UTF-8">
+ <meta http-equiv="X-UA-Compatible" content="IE=edge">
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
+ <link rel="stylesheet" href="./index.css">
+ <title>Carousel</title>
+</head>
+<body>
+ <div id="imgContainer"></div>
+
+ <input id="clickL" type="button" value=" " class="btn-left">
+ <input id="clickR" type="button" value=" " class="btn-right">
+
+ <div id="main">
+ <div class="point"></div>
+ <div class="point"></div>
+ <div class="point"></div>
+ <div class="point"></div>
+ <div class="point"></div>
+ <div class="point"></div>
+</div>
+
+ <script src="./index.js"></script>
+</body>
+</html>
diff --git a/index.js b/index.js
@@ -0,0 +1,86 @@
+const images = [
+ "./img/photo1.jpg",
+ "./img/photo2.jpg",
+ "./img/photo3.jpg",
+ "./img/photo4.jpg",
+ "./img/photo5.jpg",
+ "./img/photo6.jpg",
+];
+
+const container = document.getElementById("imgContainer");
+
+function createImages() {
+ for (let i = 0; i < images.length; i++) {
+ const img = document.createElement("img");
+ img.className = "arcticmonkeys";
+
+ img.src = images[i];
+ container.appendChild(img);
+ }
+}
+createImages();
+
+const elems = document.getElementsByClassName("arcticmonkeys");
+
+const point = document.getElementsByClassName("point");
+
+elems[0].style.display = "block";
+
+point[0].style.background = "Burlywood";
+
+function createButtons() {
+ const clickL = document.getElementById("clickL");
+ const clickR = document.getElementById("clickR");
+
+ let index = 0;
+
+ function addChangeNone() {
+ elems[index].style.display = "none";
+ point[index].style.background = "BlanchedAlmond";
+ }
+
+ function addChangeBlock() {
+ elems[index].style.display = "block";
+ point[index].style.background = "Burlywood";
+ }
+
+ clickL.addEventListener(
+ "click",
+ (clickLeft = () => {
+ if (!index) {
+ addChangeNone();
+
+ index = elems.length - 1;
+
+ addChangeBlock();
+ } else {
+ addChangeNone();
+
+ index--;
+
+ addChangeBlock();
+ }
+ })
+ );
+
+ clickR.addEventListener(
+ "click",
+ (clickRight = () => {
+ if (index >= elems.length - 1) {
+ addChangeNone();
+
+ index = 0;
+
+ addChangeBlock();
+ } else {
+ addChangeNone();
+
+ index++;
+
+ addChangeBlock();
+ }
+ })
+ );
+}
+
+createButtons();
diff --git a/svg/Ellipse.png b/svg/Ellipse.png
diff --git a/svg/left.png b/svg/left.png
diff --git a/svg/right.png b/svg/right.png