diff --git a/image-carousel/index.html b/image-carousel/index.html
new file mode 100644
index 0000000..a3386f9
--- /dev/null
+++ b/image-carousel/index.html
@@ -0,0 +1,37 @@
+
+
+
+
+
+
+ Image Carousel
+
+
+
+
+
+
+
diff --git a/image-carousel/script.js b/image-carousel/script.js
new file mode 100644
index 0000000..2d0532c
--- /dev/null
+++ b/image-carousel/script.js
@@ -0,0 +1,41 @@
+const imgs = document.getElementById('imgs')
+const leftBtn = document.getElementById('left')
+const rightBtn = document.getElementById('right')
+
+const img = document.querySelectorAll('#imgs img')
+
+let idx = 0
+
+let interval = setInterval(run, 2000)
+
+function run() {
+ idx++
+ changeImage()
+}
+
+function changeImage() {
+ if(idx > img.length - 1) {
+ idx = 0
+ } else if(idx < 0) {
+ idx = img.length - 1
+ }
+
+ imgs.style.transform = `translateX(${-idx * 500}px)`
+}
+
+function resetInterval() {
+ clearInterval(interval)
+ interval = setInterval(run, 2000)
+}
+
+rightBtn.addEventListener('click', () => {
+ idx++
+ changeImage()
+ resetInterval()
+})
+
+leftBtn.addEventListener('click', () => {
+ idx--
+ changeImage()
+ resetInterval()
+})
diff --git a/image-carousel/style.css b/image-carousel/style.css
new file mode 100644
index 0000000..338592c
--- /dev/null
+++ b/image-carousel/style.css
@@ -0,0 +1,55 @@
+@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap');
+
+* {
+ box-sizing: border-box;
+}
+
+body {
+ font-family: 'Roboto', sans-serif;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ height: 100vh;
+ margin: 0;
+}
+
+img {
+ width: 500px;
+ height: 500px;
+ object-fit: cover;
+}
+
+.carousel {
+ box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.3);
+ height: 530px;
+ width: 500px;
+ overflow: hidden;
+}
+
+.image-container {
+ display: flex;
+ transform: translateX(0);
+ transition: transform 0.5s ease-in-out;
+}
+
+.buttons-container {
+ display: flex;
+ justify-content: space-between;
+}
+
+.btn {
+ background-color: rebeccapurple;
+ color: #fff;
+ border: none;
+ padding: 0.5rem;
+ cursor: pointer;
+ width: 49.5%;
+}
+
+.btn:hover {
+ opacity: 0.9;
+}
+
+.btn:focus {
+ outline: none;
+}
+ 
+ 
+ 
+