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

김영진·2021년 10월 3일
0

UI개발

목록 보기
8/14

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

Must Remeber

var swiper = new Swiper('.swiper-container', {
  on: {
    slideChange: function () {
      // 해당 부분에 원하는 제이쿼리 효과를 넣으면 된다.
      $('.box').removeClass('active');
      $('.box').eq(this.realIndex).addClass('active');
    }
  }
});
.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가 추가되면 효과가 들어가게끔 */
profile
UI개발자 in Hivelab

0개의 댓글