From 856c755e1ebafec66d272de2e87c1c0b1a87df42 Mon Sep 17 00:00:00 2001
From: rustandbone <dlehdgh14@naver.com>
Date: Mon, 31 Jul 2023 09:23:26 +0900
Subject: [PATCH] =?UTF-8?q?feat:=20=EB=A9=94=EC=9D=B8=20=ED=8E=98=EC=9D=B4?=
 =?UTF-8?q?=EC=A7=80=20=EB=A9=94=EC=9D=B8=20=EB=B0=B0=EB=84=88=20=EC=8A=AC?=
 =?UTF-8?q?=EB=9D=BC=EC=9D=B4=EB=93=9Cswiper?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

메인 배너 swiper 재생 및 일시정지 기능 구현, a11y 추가

Related to: #2
---
 client/js/layout.js | 31 ++++++++++++++++++++++++++++++-
 1 file changed, 30 insertions(+), 1 deletion(-)

diff --git a/client/js/layout.js b/client/js/layout.js
index 3574815..9b5b46c 100644
--- a/client/js/layout.js
+++ b/client/js/layout.js
@@ -14,7 +14,7 @@ const swiper = new Swiper(".swiper", {
     // bulletActiveClass: "is-active",
     renderBullet: function (index, className) {
       return /* html */ `
-      <span class="swiper-pagination-bullet bg-white mr-4" style="background-color: white;"
+      <span class="swiper-pagination-bullet bg-white mr-0"
       tabindex="${index}" role="button" aria-label="Go to slide ${index}"></span>
       `;
     },
@@ -24,6 +24,35 @@ const swiper = new Swiper(".swiper", {
     nextEl: ".swiper-button-next", // 다음 버튼 클래스명
     prevEl: ".swiper-button-prev", // 이번 버튼 클래스명
   },
+  a11y: {
+    prevSlideMessage: "이전 슬라이드",
+    nextSlideMessage: "다음 슬라이드",
+    slideLabelMessage:
+      "총 {{slidesLength}}장의 슬라이드 중 {{index}}번 슬라이드 입니다.",
+  },
+  on: {
+    init: function () {
+      thisSlide = this;
+      autoPlayBtn = document.querySelector(".wrap-autoplay-control > button");
+      autoPlayBtnIcon = document.querySelector(
+        ".wrap-autoplay-control > button > i",
+      );
+      autoPlayBtn.addEventListener("click", (e) => {
+        autoPlayState = autoPlayBtn.getAttribute("aria-pressed");
+        if (autoPlayState === "false") {
+          autoPlayBtn.setAttribute("aria-pressed", "true");
+          autoPlayBtnIcon.classList.toggle("fa-pause");
+          autoPlayBtnIcon.classList.toggle("fa-play");
+          thisSlide.autoplay.stop();
+        } else if (autoPlayState === "true") {
+          autoPlayBtn.setAttribute("aria-pressed", "false");
+          autoPlayBtnIcon.classList.toggle("fa-pause");
+          autoPlayBtnIcon.classList.toggle("fa-play");
+          thisSlide.autoplay.start();
+        }
+      });
+    },
+  },
 });
 
 // swiper