Swiper swiper-creative 옵션

minaKim·2022년 2월 8일
0
post-thumbnail

🍍 구현해보고 싶은 기능이 생겼다 !



오늘도 어김없이 딱히 할일이 없어서 뭐해야할지 고민하다가 다음 프로젝트가 여행사라고 해서 부랴부랴 여행사 사이트에 있는 기능들을 뒤져봤다.

그 중에서 내 눈을 사로잡은건

https://m.hanatour.com/com/area/main 하나투어 페이지에 들어가면 자세한 기능을 볼 수 있어요!

간단하게 설명하자면 위아래로 스크롤을 하는 페이지인데 스크롤시 기존 슬라이드는 스크롤탑을 0을 유지하면서 그대로 있고 새로운 컨텐츠가 아래에서 위로 올라오는 형식이다. ( 정확히 설명 어려움ㅜ )
그래서 처음에 페이지만 봤을 때는 스크롤매직이나 스크롤러를 사용해야하나 고민했는데 막상 소스코드를 뜯어보니까 swiper를 쓴게 아니던가 .. !!

나에게는 .. 슬라이더로만 사용하던 스와이퍼가 여기선 이렇게 똑똑하다고 ? 라는 생각에 열심히 연습할겸 만들어봤다.

💥 첫번째 위기 : direction: "vertical"이 안먹어!

항상 가로로만 사용을 해와서 그런지 브라우저 전체 100vh를 차지하는 세로형 슬라이더를 생각보다 만들기가 어려웠다. 그 비밀은 바로 .. 100vh가 아닌 100%에 있었다.

우리는 흔히 브라우저 전체의 높이값을 차지하는 컨텐츠에게는 100vh로 설정을 해두는데 스와이퍼 데모에는 html, body부터 차례대로 상속을 받아 height:100%라는 속성을 사용한게 아니던가 !

이런 문제로 인해 swiper 컨텐츠 자체에 #wrap 으로 감싼 형태에서는 슬라이더가 정상적으로 작동하지 않았던 것이다 -ㅅ- !! 이 문제는 #wrap 에 height:100% 를 주니 해.결.완.료

💥 두번째 위기 : 옵션이 뭔지 모르겠어 ..

흠냐링 .. 어째저째 세로형 슬라이더는 구현을 했는데요 .. 하나투어 페이지 같은 효과를 모르겠다..

https://swiperjs.com/demos 스와이퍼.js의 대부분의 옵션을 볼 수 있는 데모사이트이다.
참고로 나는 눈앞에 있는건 하나도 못본다고 클릭하면 다른 옵션을 볼 수 있는걸 놓쳤다 ..

https://swiperjs.com/demos/257-effect-creative/core.html 페이지의 세번째 컨텐츠가 바로 내가 구현을 원하던 것 !!! 역시 난 우물안개구리 .. 물어보니까 10초만에 해결됐음

참고로 데모페이지에 있는 스크립트를 그대로 가져오면

var swiper3 = new Swiper(".mySwiper3", {
  grabCursor: true,
  effect: "creative",
  creativeEffect: {
    prev: {
      shadow: true,
      translate: ["-20%", 0, -1],
    },
    next: {
      translate: ["100%", 0, 0],
    },
  },
});

이 형태인데 shadow:true 의 경우 컨텐츠를 넘길 때 이전 컨텐츠가 약간씩 어두워지는걸 볼 수 있다. 이 효과를 원치 않는다면 false로 교체하거나 라인 자체를 삭제해줘도 된다.


다음 저 스크립트를 그대로 사용할 경우 direction:vertical의 옵션에서는 정상적으로 작동하지 않는다는걸 볼 수 있다. 그 이유는 translate: ["-20%",0,-1] 때문인데 translate X Y Z 순서대로 X값을 -20%정도 움직이며 넘긴다는걸 의미한다. 그래서 내가 사용한 코드는

var swiper = new Swiper(".mySwiper", {
    direction: "vertical",
    mousewheel: {
        invert: false,
    },
    grabCursor: true,
    effect: "creative",
    creativeEffect: {
      prev: {
        translate: [0, 0, 0],
      },
      next: {
        translate: [0, "100%", 0],
      },
    },
});

💥 전체코드내놔

zza-zzan ! 짜짠 ! 이게 바로 내가 원하던 기능이다 포항항 §( ̄▽ ̄
부드러움을 추가하고 싶거나, 조금 더 느리게 움직이길 원한다면 speed 속성과 같은 옵션을 추가해서 조절해주면 된다.


나를 2시간동안 괴롭히던 Swiper .. 정말 시원하게 해결했다 !

swiper scrolltop fixed / swiper swiper-slide fix / swiper scroll fix를 찾는 모든 이들에게 .. 도움이 되길 ..

0개의 댓글