From 421bfc5925a70c0aa7955ff1a66cf4a9dce81759 Mon Sep 17 00:00:00 2001 From: Brad Traversy Date: Thu, 5 Nov 2020 13:04:55 -0500 Subject: [PATCH] Image carousel --- image-carousel/index.html | 37 ++++++++++++++++++++++++++ image-carousel/script.js | 41 +++++++++++++++++++++++++++++ image-carousel/style.css | 55 +++++++++++++++++++++++++++++++++++++++ 3 files changed, 133 insertions(+) create mode 100644 image-carousel/index.html create mode 100644 image-carousel/script.js create mode 100644 image-carousel/style.css 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 + + +
+
+ first-image + second-image + third-image + fourth-image +
+ +
+ + +
+
+ + + + diff --git a/image-carousel/script.js b/image-carousel/script.js new file mode 100644 index 0000000..18c387b --- /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() +}) \ No newline at end of file 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; +}