feat: add dots support

index.html

@@ -21,6 +21,16 @@
           src="https://images.unsplash.com/photo-1494500764479-0c8f2919a3d8?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1770&q=80"
           alt="" class="img">
       </div>
+      <div class="slider__slide">
+        <img
+          src="https://images.unsplash.com/photo-1494500764479-0c8f2919a3d8?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1770&q=80"
+          alt="" class="img">
+      </div>
+      <div class="slider__slide">
+        <img
+          src="https://images.unsplash.com/photo-1501785888041-af3ef285b470?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1770&q=80"
+          alt="" class="img">
+      </div>
       <div class="slider__slide">
         <img
           src="https://images.unsplash.com/photo-1501785888041-af3ef285b470?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1770&q=80"
@@ -40,11 +50,7 @@
           d="M278.6 233.4c12.5 12.5 12.5 32.8 0 45.3l-160 160c-12.5 12.5-32.8 12.5-45.3 0s-12.5-32.8 0-45.3L210.7 256 73.4 118.6c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0l160 160z" />
       </svg>
     </button>
-    <div class="slider__dots">
-      <button class="slider__dot current"></button>
-      <button class="slider__dot"></button>
-      <button class="slider__dot"></button>
-    </div>
+    <div class="slider__dots"></div>
   </div>
   <script type="module" src="/main.js"></script>
 </body>

main.js

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