-
-
+
+
-
-
-
-
-
- - +
-
+
+
-
- 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;
