diff --git a/Image Slider/images/1.jpg b/Image Slider/images/1.jpg new file mode 100644 index 0000000..9af38bd Binary files /dev/null and b/Image Slider/images/1.jpg differ diff --git a/Image Slider/images/2.jpg b/Image Slider/images/2.jpg new file mode 100644 index 0000000..311c49c Binary files /dev/null and b/Image Slider/images/2.jpg differ diff --git a/Image Slider/images/3.jpg b/Image Slider/images/3.jpg new file mode 100644 index 0000000..a93dfaa Binary files /dev/null and b/Image Slider/images/3.jpg differ diff --git a/Image Slider/index.html b/Image Slider/index.html new file mode 100644 index 0000000..f4494a1 --- /dev/null +++ b/Image Slider/index.html @@ -0,0 +1,34 @@ + + + + + + Image Slider + + +
+
+ +
+
+ +
+
+ +
+ +
+ + +
+ +
+ + + +
+ +
+ + + diff --git a/Image Slider/index.js b/Image Slider/index.js new file mode 100644 index 0000000..634cd05 --- /dev/null +++ b/Image Slider/index.js @@ -0,0 +1,102 @@ +const slides = document.getElementsByClassName("carousel-item"); +let slidePosition = 0; +const totalSlides = slides.length; + +const navCircles = document.querySelector(".carousel-nav-circles"); +const navCircle1 = document.getElementById("carousel-nav-1"); +const navCircle2 = document.getElementById("carousel-nav-2"); +const navCircle3 = document.getElementById("carousel-nav-3"); + +document.getElementById("carousel-button-next").addEventListener("click", moveToNextSlide); +document.getElementById("carousel-button-prev").addEventListener("click", moveToPrevSlide); + +navCircles.addEventListener("click", (e) => { + e.preventDefault(); + + const navCirclePosition = e.target.id; + + removeNavCircleColors(navCircle1, navCircle2, navCircle3); + hideAllSlides(); + + switch (navCirclePosition) { + case "carousel-nav-1": + moveToSlide(0); + // displaySlidePosition(0); + navCircle1.classList.add("current-slide-position"); + break; + case "carousel-nav-2": + moveToSlide(1); + // displaySlidePosition(1); + navCircle2.classList.add("current-slide-position"); + break; + case "carousel-nav-3": + moveToSlide(2); + // displaySlidePosition(2); + navCircle3.classList.add("current-slide-position"); + break; + } +}); + +function moveToNextSlide() { + hideAllSlides(); + removeNavCircleColors(navCircle1, navCircle2, navCircle3); + + if (slidePosition === totalSlides - 1) { + slidePosition = 0; + } else { + slidePosition++; + } + slides[slidePosition].classList.add("carousel-item-visible"); + + displaySlidePosition(slidePosition); +} + +function moveToPrevSlide() { + hideAllSlides(); + removeNavCircleColors(navCircle1, navCircle2, navCircle3); + + if (slidePosition === 0) { + slidePosition = totalSlides - 1; + } else { + slidePosition--; + } + slides[slidePosition].classList.add("carousel-item-visible"); + + displaySlidePosition(slidePosition); +} + +function hideAllSlides() { + for (let slide of slides) { + slide.classList.remove("carousel-item-visible"); + slide.classList.add("carousel-item-hidden"); + } + return; +} + +function moveToSlide(slideNumber) { + return slides[slideNumber].classList.add("carousel-item-visible"); +} + +function displaySlidePosition(slideNumber) { + if (slideNumber === 0) { + return navCircle1.classList.add("current-slide-position"); + } + if (slideNumber === 1) { + return navCircle2.classList.add("current-slide-position"); + } + if (slideNumber === 2) { + return navCircle3.classList.add("current-slide-position"); + } +} + +function removeNavCircleColors(el1, el2, el3) { + el1.classList.remove("current-slide-position"); + el2.classList.remove("current-slide-position"); + el3.classList.remove("current-slide-position"); + return; +} + +function transitionEveryFiveSeconds() { + setInterval(moveToNextSlide, 5000); +} +transitionEveryFiveSeconds(); diff --git a/Image Slider/styles.css b/Image Slider/styles.css new file mode 100644 index 0000000..58dd2e7 --- /dev/null +++ b/Image Slider/styles.css @@ -0,0 +1,103 @@ +* { + margin: 0; + padding: 0; + box-sizing: border-box; +} + +body { + display: flex; + justify-content: center; + align-items: center; + height: 100vh; + padding: 1em; +} + +.carousel { + max-width: 1000px; + position: relative; +} + +.carousel-item, +.carousel-item-hidden { + display: none; +} + +.carousel-item img { + width: 100%; + height: auto; + object-fit: cover; +} + +.carousel-item-visible { + display: block; + animation: fadeVisibility 1.3s; +} + +.carousel-actions { + display: flex; + width: 100%; + justify-content: space-between; + position: absolute; + top: 50%; + transform: translateY(-50%); +} + +button { + background-color: grey; + color: white; + border-radius: 25px; + border: 0; + cursor: pointer; + width: 40px; + height: 40px; + font-weight: 900; + font-size: 2rem; + line-height: 2rem; + font-family: "Trebuchet MS", "Lucida Sans Unicode", "Lucida Grande", "Lucida Sans", Arial, sans-serif; +} + +button:hover, +button:focus { + background-color: yellowgreen; + color: black; +} + +#carousel-button-prev { + margin-left: 0.5em; +} + +#carousel-button-next { + margin-right: 0.5em; +} + +.carousel-nav-circles { + display: flex; + width: 100%; + justify-content: center; + position: absolute; + bottom: 2%; +} + +.carousel-nav-btn { + background-color: white; + width: 15px; + height: 15px; + margin: 0 4px; +} + +.carousel-nav-btn:hover { + background-color: hotpink; +} + +.current-slide-position { + background-color: yellowgreen; +} + +@keyframes fadeVisibility { + 0% { + opacity: 0; + } + 100% { + opacity: 1; + } +}