|
@@ -2,8 +2,27 @@ import "./style.css";
|
|
|
const slider = document.querySelector(".slider__wrapper");
|
|
|
const leftBtn = document.querySelector(".slider__left-btn");
|
|
|
const rightBtn = document.querySelector(".slider__right-btn");
|
|
|
+const dots = document.querySelector(".slider__dots");
|
|
|
|
|
|
let state = 0;
|
|
|
+let prevDot = null;
|
|
|
+
|
|
|
+for (let i = 0; i < slider.children.length; i++) {
|
|
|
+ const dot = document.createElement("button");
|
|
|
+ dot.classList.add("slider__dot");
|
|
|
+ if (i === state) {
|
|
|
+ dot.classList.add("current");
|
|
|
+ prevDot = dot;
|
|
|
+ }
|
|
|
+ dots.append(dot);
|
|
|
+ dot.addEventListener("click", () => {
|
|
|
+ prevDot?.classList.remove("current");
|
|
|
+ dot.classList.add("current");
|
|
|
+ prevDot = dot;
|
|
|
+ state = i;
|
|
|
+ slider.style.setProperty("--x", state);
|
|
|
+ });
|
|
|
+}
|
|
|
|
|
|
rightBtn.addEventListener("click", function () {
|
|
|
state = (state + 1) % slider.children.length;
|