From 6d8518551187bf983d8183641b9367680569c89e Mon Sep 17 00:00:00 2001 From: atmagat001 Date: Tue, 21 Mar 2023 22:48:09 +0800 Subject: [PATCH] recreated the slider using function called out for each butto --- index.html | 14 +++++++------- script.js | 16 +++++++++++++--- script2.js | 43 +++++++++++++++++++++++++++++++++++++++++++ styles.css | 6 ++++++ 4 files changed, 69 insertions(+), 10 deletions(-) create mode 100644 script2.js diff --git a/index.html b/index.html index ffded32..a7d552e 100644 --- a/index.html +++ b/index.html @@ -5,19 +5,19 @@ - + Document
- - + +
    -
  • - Nature Image #1 -
    • -
  • +
  • + Nature Image #1 +
    • +
  • Nature Image #2
  • diff --git a/script.js b/script.js index a6bb87b..3640931 100644 --- a/script.js +++ b/script.js @@ -1,7 +1,11 @@ -const buttons = document.querySelectorAll("[data-carousel-button]") +const buttons = document.querySelectorAll("[data-carousel-button]") /* selects the buttons and store in buttons variable (now an array) */ -buttons.forEach(button => { - button.addEventListener("click", () => { +buttons.forEach(button => { /* loops thru all buttons and adding an event listener that will perform a function */ + button.addEventListener("click", () => + + + + { const offset = button.dataset.carouselButton === "next" ? 1 : -1 const slides = button .closest("[data-carousel]") @@ -15,4 +19,10 @@ buttons.forEach(button => { slides.children[newIndex].dataset.active = true delete activeSlide.dataset.active }) + + + }) + +/* the function basically sets data-active into one of the slides by using offset variable as index (or new index) adding or subtracting depending +on which button is pressed which will set the data-attribute to the element with the new index */ \ No newline at end of file diff --git a/script2.js b/script2.js new file mode 100644 index 0000000..5386f1f --- /dev/null +++ b/script2.js @@ -0,0 +1,43 @@ +let offset = 0; +let buttonPrev = document.getElementById("button-prev"); +let buttonNext = document.getElementById("button-next"); + + + +buttonPrev.addEventListener("click", moveSlidePrev); +buttonNext.addEventListener("click", moveSlideNext); + +function moveSlidePrev() { + offset = -1; + slideMovement(); + + +} + +function moveSlideNext() { + offset = 1; + slideMovement(); + + +} + + +const slideMovement= () => { + let slides = document.querySelectorAll("li"); + let activeSlide = document.getElementById("active-slide"); + let newIndex = [...slides].indexOf(activeSlide) + offset + + if (newIndex >= slides.length) { + newIndex = 0; + } + + if (newIndex < 0) { + newIndex = slides.length - 1 + }; + + console.log(newIndex); + activeSlide.removeAttribute("id","active-slide"); + slides[newIndex].setAttribute("id","active-slide"); + + +} \ No newline at end of file diff --git a/styles.css b/styles.css index 5129f35..1836d80 100644 --- a/styles.css +++ b/styles.css @@ -40,6 +40,12 @@ body { transition-delay: 0ms; } +#active-slide { + opacity: 1; + z-index: 1; + transition-delay: 0ms; +} + .carousel-button { position: absolute; z-index: 2;