8월16일62일차 - swiper는 js로

this는 화살표함수에서 적용되지 않습니다. currentTaget이 this와 비슷한 역할을 합니다.
window.addEventListener("DOMContentLoaded", () => {
  const H1 = document.querySelector("h1");
  H1.addEventListener("click", (e) => {
    e.currentTarget.style.color = `blue`;
  });
});

pagination에 클릭 기능 추가하는 옵션은 pagination 안에서 clickable: true, 입니다.
    pagination: {
      el: ".swiper-pagination",
      clickable: true,
    },

autoplay 기능은 다음과 같습니다.
    autoplay: {
      delay: 2000,
      disableOnInteraction: false,
    },

init 이벤트는 다음과 같습니다.
    on: {
      // init: function () {
      //   console.log("swiper initialized");
      // }, 또는
      slideChange: function () {
      },

slideChange 이벤트에서 index를 가져올 수 있습니다.
    on: {
      slideChange: function () {
        console.log(this.realIndex);
      },

slideChange 속성을 이용해 클래스 on을 붙일 수 있습니다.
      slideChange: function () {
        console.log(this.realIndex);
        let itm = document.querySelector('.swiper-slide-active')
        itm.classList.add('on')
      },
     
slideChangeTransitionEnd 속성을 이용하면 transition을 적용할 수 있습니다.
      slideChangeTransitionEnd: function () {
        document.querySelectorAll(".swiper-slide").forEach((e) => e.classList.remove("on"));
        document.querySelector(".swiper-slide-active").classList.add("on");
        document.querySelector("h1 strong").innerText = `${this.realIndex + 1} / ${this.slides.length - 2}`;
      },     
.swiper-slide-active.on {
  font-size: 30px;
  transition: 0.5s;
}