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