Swiper - 웹 팝업 슬라이드 수정

은돌1113 2022. 3. 2. 20:26

728x90

Swiper - 기본 설정

20220228 오후부터 진행하던 작업인데 끝마치지 못해서 20220301 오전에 시도 해보던 중 코드만 보고, 공식문서 보면서 헛발질 하는 것 보다는 검색 해보자!! 라는 마음으로 swiper 라이브러리 모바일

eundol1113.tistory.com

Swiper - 양 옆에 이동 버튼 만들기

Swiper - 기본 설정 20220228 오후부터 진행하던 작업인데 끝마치지 못해서 20220301 오전에 시도 해보던 중 코드만 보고, 공식문서 보면서 헛발질 하는 것 보다는 검색 해보자!! 라는 마음으로 swiper 라

eundol1113.tistory.com

팝업에서 벗어난 부분에서 슬라이드가 나타나는 것보다는 슬라이더 넘어갈 때

width 안에서만 보이도록 수정 해달라고 하셔서 .web-popup의 width를 100% → 500px로 변경했다.

.web-popup {
    width: 500px;
    left: 60%;
    position: fixed;
    z-index: 10001;
    /* display:none; */
    top: 18%;
    -webkit-animation-name: webAnimatebottom;
    -webkit-animation-duration: 1s;
    animation-name: webAnimatebottom;
    animation-duration: 1s;
  }

Swiper API

Swiper is the most modern free mobile touch slider with hardware accelerated transitions and amazing native behavior.

swiperjs.com

728x90