diff --git a/100_projects/48-create-animated-image-carousel/imgs/01.jpg b/100_projects/48-create-animated-image-carousel/imgs/01.jpg
new file mode 100644
index 0000000..5056d77
Binary files /dev/null and b/100_projects/48-create-animated-image-carousel/imgs/01.jpg differ
diff --git a/100_projects/48-create-animated-image-carousel/imgs/02.jpg b/100_projects/48-create-animated-image-carousel/imgs/02.jpg
new file mode 100644
index 0000000..7fa6cb9
Binary files /dev/null and b/100_projects/48-create-animated-image-carousel/imgs/02.jpg differ
diff --git a/100_projects/48-create-animated-image-carousel/imgs/03.jpg b/100_projects/48-create-animated-image-carousel/imgs/03.jpg
new file mode 100644
index 0000000..41b5a4c
Binary files /dev/null and b/100_projects/48-create-animated-image-carousel/imgs/03.jpg differ
diff --git a/100_projects/48-create-animated-image-carousel/imgs/04.jpg b/100_projects/48-create-animated-image-carousel/imgs/04.jpg
new file mode 100644
index 0000000..43be804
Binary files /dev/null and b/100_projects/48-create-animated-image-carousel/imgs/04.jpg differ
diff --git a/100_projects/48-create-animated-image-carousel/imgs/05.jpg b/100_projects/48-create-animated-image-carousel/imgs/05.jpg
new file mode 100644
index 0000000..a09d300
Binary files /dev/null and b/100_projects/48-create-animated-image-carousel/imgs/05.jpg differ
diff --git a/100_projects/48-create-animated-image-carousel/index.html b/100_projects/48-create-animated-image-carousel/index.html
new file mode 100644
index 0000000..0609fec
--- /dev/null
+++ b/100_projects/48-create-animated-image-carousel/index.html
@@ -0,0 +1,36 @@
+
+
+
+
+
+
+
+
+ Document
+
+
+
+
+
+
+
+ -
+
+
+ -
+
+
+ -
+
+
+ -
+
+
+ -
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/100_projects/48-create-animated-image-carousel/script.js b/100_projects/48-create-animated-image-carousel/script.js
new file mode 100644
index 0000000..a6bb87b
--- /dev/null
+++ b/100_projects/48-create-animated-image-carousel/script.js
@@ -0,0 +1,18 @@
+const buttons = document.querySelectorAll("[data-carousel-button]")
+
+buttons.forEach(button => {
+ button.addEventListener("click", () => {
+ const offset = button.dataset.carouselButton === "next" ? 1 : -1
+ const slides = button
+ .closest("[data-carousel]")
+ .querySelector("[data-slides]")
+
+ const activeSlide = slides.querySelector("[data-active]")
+ let newIndex = [...slides.children].indexOf(activeSlide) + offset
+ if (newIndex < 0) newIndex = slides.children.length - 1
+ if (newIndex >= slides.children.length) newIndex = 0
+
+ slides.children[newIndex].dataset.active = true
+ delete activeSlide.dataset.active
+ })
+})
diff --git a/100_projects/48-create-animated-image-carousel/styles.css b/100_projects/48-create-animated-image-carousel/styles.css
new file mode 100644
index 0000000..2b6ac77
--- /dev/null
+++ b/100_projects/48-create-animated-image-carousel/styles.css
@@ -0,0 +1,62 @@
+*, *::before, *::after {
+ box-sizing: border-box;
+}
+body {
+ margin: 0;
+}
+.carousel {
+ width: 100vw;
+ height: 100vh;
+ position: relative;
+}
+.carousel > ul {
+ margin: 0;
+ padding: 0;
+ list-style: none;
+}
+.slide {
+ position: absolute;
+ inset: 0;
+ opacity: 0;
+ transition: 200ms opacity ease-in-out;
+ transition-delay: 200ms;
+}
+.slide > img {
+ display: block;
+ width: 100%;
+ height: 100%;
+ object-fit: cover;
+ object-position: center;
+}
+.slide[data-active] {
+ opacity: 1;
+ z-index: 1;
+ transition-delay: 0ms;
+}
+.carousel-button {
+ position: absolute;
+ z-index: 2;
+ background: none;
+ border: none;
+ font-size: 50px;
+ top: 50%;
+ transform: translateY(-50%);
+ color:#FFF;
+ cursor: pointer;
+ padding:0 5px;
+ background-color: rgba(0, 0, 0, .3);
+}
+.carousel-button:hover,
+.carousel-button:focus {
+ color: white;
+ background-color: rgba(0, 0, 0, .2);
+}
+.carousel-button:focus {
+ outline: 1px solid black;
+}
+.carousel-button.prev {
+ left: 1rem;
+}
+.carousel-button.next {
+ right: 1rem;
+}
\ No newline at end of file