Swiper 이벤트 호출, CSS hover 텍스트 밑줄, 제이쿼리 가상 요소 제어관련

211003 개인 기업 사이트 코딩을 진행하면서 Swiper 슬라이드를 적용하게 되었는데, 슬라이드가 넘어갈때 event가 발생되도록 구현을 해봤다.

Must Remeber

var swiper = new Swiper('.swiper-container', {
  on: {
    slideChange: function () {
      // 해당 부분에 원하는 제이쿼리 효과를 넣으면 된다.
      $('.box').removeClass('active');
      $('.box').eq(this.realIndex).addClass('active');
    }
  }
});

• CSS 텍스트 hover 밑줄 events는 적용하고자 하는 요소가 inline일 때 여러줄 적용 가능하다.
  참고: https://gaenarinari.tistory.com/entry/%EA%B8%80%EC%9E%90-%EB%B0%8F-hover-effect

.footer li a::after {
  display: block;
  border-bottom: 1px solid var(--default-color);
  transform: scaleX(0);
  transform-origin: 0 50%;
  transition: transform 300ms ease-in-out;
  content: '';
}
.footer li:hover a::after {
  transform: scaleX(1);
}

• 제이쿼리는 가상 요소를 직접 조작할 수 없으므로, class 추가를 활용하자.

.top-menu__lang > a::after {
  position: absolute;
  top: 22px;
  right: 12px;
  display: block;
  width: 24px;
  height: 24px;
  background: url(../images/icon_arr_down_w.png) no-repeat 0 0;
  content: '';
  transition: transform .3s linear;
}
.top-menu__lang > a.active::after {
  transform: rotate(-180deg);
}
/* 이런식으로 active가 추가되면 효과가 들어가게끔 */