diff --git a/100_projects/37-image-slider/img/1.jpg b/100_projects/37-image-slider/img/1.jpg
new file mode 100644
index 0000000..ff8e99c
Binary files /dev/null and b/100_projects/37-image-slider/img/1.jpg differ
diff --git a/100_projects/37-image-slider/img/2.jpg b/100_projects/37-image-slider/img/2.jpg
new file mode 100644
index 0000000..3e6e680
Binary files /dev/null and b/100_projects/37-image-slider/img/2.jpg differ
diff --git a/100_projects/37-image-slider/img/3.jpg b/100_projects/37-image-slider/img/3.jpg
new file mode 100644
index 0000000..199d1b9
Binary files /dev/null and b/100_projects/37-image-slider/img/3.jpg differ
diff --git a/100_projects/37-image-slider/img/4.jpg b/100_projects/37-image-slider/img/4.jpg
new file mode 100644
index 0000000..cdfd8c9
Binary files /dev/null and b/100_projects/37-image-slider/img/4.jpg differ
diff --git a/100_projects/37-image-slider/img/5.jpg b/100_projects/37-image-slider/img/5.jpg
new file mode 100644
index 0000000..0c9e83d
Binary files /dev/null and b/100_projects/37-image-slider/img/5.jpg differ
diff --git a/100_projects/37-image-slider/img/6.jpg b/100_projects/37-image-slider/img/6.jpg
new file mode 100644
index 0000000..23f29f5
Binary files /dev/null and b/100_projects/37-image-slider/img/6.jpg differ
diff --git a/100_projects/37-image-slider/img/7.jpg b/100_projects/37-image-slider/img/7.jpg
new file mode 100644
index 0000000..4eddea2
Binary files /dev/null and b/100_projects/37-image-slider/img/7.jpg differ
diff --git a/100_projects/37-image-slider/index.html b/100_projects/37-image-slider/index.html
new file mode 100644
index 0000000..4bbe88c
--- /dev/null
+++ b/100_projects/37-image-slider/index.html
@@ -0,0 +1,21 @@
+
+
+
+
+
+
+ Document
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/100_projects/37-image-slider/main.js b/100_projects/37-image-slider/main.js
new file mode 100644
index 0000000..4768799
--- /dev/null
+++ b/100_projects/37-image-slider/main.js
@@ -0,0 +1,35 @@
+(function () {
+ const pictures = [
+ '1',
+ '2',
+ '3',
+ '4',
+ '5',
+ '6',
+ '7'
+ ];
+
+ const buttons = document.querySelectorAll('.btn');
+ const imgDiv = document.querySelector('.img');
+
+ let counter = 0
+
+ buttons.forEach(function (button) {
+ button.addEventListener("click", function (e) {
+ if (button.classList.contains('btn-left')){
+ counter--
+ if (counter < 0){
+ counter = pictures.length - 1
+ }
+ imgDiv.style.backgroundImage = `url('./img/${pictures[counter]}.jpg')`
+ }
+ if (button.classList.contains('btn-right')){
+ counter--
+ if (counter < 0){
+ counter = pictures.length - 1
+ }
+ imgDiv.style.backgroundImage = `url('./img/${pictures[counter]}.jpg')`
+ }
+ })
+ })
+}) ();
\ No newline at end of file
diff --git a/100_projects/37-image-slider/note.txt b/100_projects/37-image-slider/note.txt
new file mode 100644
index 0000000..8ff4337
--- /dev/null
+++ b/100_projects/37-image-slider/note.txt
@@ -0,0 +1 @@
+https://www.youtube.com/watch?v=sxq-https://www.youtube.com/watch?v=sxq-8qv2i1Q&list=PL9bD98LkBR7P16BndaNtP4x6Wf5Ib85Hm&index=7&ab_channel=Tech2etc
\ No newline at end of file
diff --git a/100_projects/37-image-slider/style.css b/100_projects/37-image-slider/style.css
new file mode 100644
index 0000000..f8bc4f0
--- /dev/null
+++ b/100_projects/37-image-slider/style.css
@@ -0,0 +1,44 @@
+*{
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box;
+}
+body{
+ background:linear-gradient(to right, #D4D3DD, #EFEFBB);
+}
+.img{
+ width: 60%;
+ height: 80vh;
+ background-image: url("./img/1.jpg");
+ background-position: center;
+ background-repeat: no-repeat;
+ background-size: cover;
+ position: relative;
+ margin: 30px auto;
+}
+.btn-left{
+ position: absolute;
+ top: 50%;
+ left: 0;
+ color: #fff;
+ transform: translate(-50%, -50%);
+ font-size: 1.5rem;
+ padding: 15px;
+ border-radius: 11px;
+ text-align: center;
+ backdrop-filter: blur(5px);
+ cursor: pointer;
+}
+.btn-right{
+ position: absolute;
+ top: 50%;
+ right:-35px;
+ color: #fff;
+ transform: translate(-50%, -50%);
+ font-size: 1.5rem;
+ padding: 15px;
+ border-radius: 11px;
+ text-align: center;
+ backdrop-filter: blur(5px);
+ cursor: pointer;
+}
\ No newline at end of file