diff --git a/img/photo1.jpg b/img/photo1.jpg
new file mode 100644
index 0000000..d1cf3f2
Binary files /dev/null and b/img/photo1.jpg differ
diff --git a/img/photo2.jpg b/img/photo2.jpg
new file mode 100644
index 0000000..00a73f0
Binary files /dev/null and b/img/photo2.jpg differ
diff --git a/img/photo3.jpg b/img/photo3.jpg
new file mode 100644
index 0000000..c53522b
Binary files /dev/null and b/img/photo3.jpg differ
diff --git a/img/photo4.jpg b/img/photo4.jpg
new file mode 100644
index 0000000..4f3c722
Binary files /dev/null and b/img/photo4.jpg differ
diff --git a/img/photo5.jpg b/img/photo5.jpg
new file mode 100644
index 0000000..a44e257
Binary files /dev/null and b/img/photo5.jpg differ
diff --git a/img/photo6.jpg b/img/photo6.jpg
new file mode 100644
index 0000000..87bc9e0
Binary files /dev/null and b/img/photo6.jpg differ
diff --git a/index.css b/index.css
new file mode 100644
index 0000000..3a495a4
--- /dev/null
+++ 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
new file mode 100644
index 0000000..d95172a
--- /dev/null
+++ b/index.html
@@ -0,0 +1,27 @@
+
+
+
+
+
+
+
+ Carousel
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/index.js b/index.js
new file mode 100644
index 0000000..2a1737b
--- /dev/null
+++ 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
new file mode 100644
index 0000000..e805ca0
Binary files /dev/null and b/svg/Ellipse.png differ
diff --git a/svg/left.png b/svg/left.png
new file mode 100644
index 0000000..024fa30
Binary files /dev/null and b/svg/left.png differ
diff --git a/svg/right.png b/svg/right.png
new file mode 100644
index 0000000..8027c85
Binary files /dev/null and b/svg/right.png differ