저는 지금 인프런 사이트 클론코딩을 진행중에 있습니다. 또한 다른 팀원들도 열심히 클론코딩을 진행중에 있는데요 모두 공통적인 사항으로는 SwiperJs라는 화면 슬라이드 넘어가기 기능이 각 사이트에 포함되어 있다는 것입니다.
공식문서 Swiperjs가 워낙 자세히 잘 나와 있으나, 가상 클래스 때문에 애를 많이 먹었기 때문에, 이번기회에 어려웠던 부분들 위주로 글을 작성해보려 합니다.
본문에서 사용하는 swiperjs의 버전은 6버전입니다.
Swiperjs
웹사이트의 슬라이드 화면을 간단하게 api를 활용하여 구성할수있게 도와주는 기능입니다. 대부분의 웹사이트의 슬라이드 기능은 모두 해당 api를 사용하여 구성되어있습니다. 슬라이드가 어떤것을 말하냐면...
위와 같은 배너가 좌우로 넘어가는 것을 말합니다. 해당 배너에서 학습할수있는 swiper관련 특성은 총 3가지가 있는데요 하나씩 살펴보려고 합니다!
- Swiper-slide
- Swiper-pagination
- Swiper-pagination-bullet
제가 인프런 클론코딩을 하면서 만난 3개의 Swiper 특징입니다. 이 세개를 알아봄으로써 큰틀과 디테일을 잡아볼수있겠습니다.
Swiper-container, Swiper-wrapper
3개의 세부 특징들을 살펴보기 이전에 Swiper를 사용을 하기전 잡아야하는 큰 구조를 말씀드리겠습니다.
<div class="swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide btn1">제가 클론코딩을 하면서 사용한 구조입니다. 여기서 중요한점은 swiperjs 의 api가 자동으로 적용이 되어 사용되려면 클래스의 이름을 무조건 저렇게 맞춰줘야한다는 것입니다(버전6기준). swiper-container와 swiper-wrapper로 한칸한칸의 슬라이드를 감싸주는 컨테이너를 생성하고, 각 그림 배너는 swiper-slide로 한칸씩 처리해주면 됩니다.
swiper-slide
각 배너의 한 칸을 담당하는 swiper-slide입니다. 역시나 이름을 맞춰줘야 정상작동을 합니다.
각 슬라이드는 위와 같이 구성이 됩니다. 이 하나의 슬라이드에 배경색을 이미지와 맞추어 구성하였고 왼쪽엔 텍스트, 오른쪽엔 이미지를 배치하였습니다. 배너가 총 7개였으므로 위와같은 swiper-slide를 총 7개의 div로 구성하면 됩니다.
이렇게 구성을 끝마치면, 이제 swiper를 작동시켜야겠죠. 작동은 Javascript로 넘겨줘야합니다.
var mySwiper = new Swiper(".banner .swiper-container", {
loop: true,
autoplay: {
delay: 5000,
},
pagination: {
el: ".banner .swiper-pagination",
clickable: true,
},
navigation: {
prevEl: ".banner .swiper-prev",
nextEl: ".banner .swiper-next",
},
slidesPerView: 1,
centeredSlides: true,
});JS코드입니다. pagination과 navigation은 나중에 설명하겠습니다. loop:true는 배너가 맨끝에서 다시 처음으로 돌아온다는 속성이고 autoplay는 자동재생 속성입니다(5초의 간격을주었습니다). 이때, pause와 start버튼을 통하여 autoplay를 껏다 켰다 해주는 기능도 만들어주었습니다. 해당기능도 pagination에서 설명하겠습니다. 위와 같은 코드를 작성해주면 기본적인 slide기능(마우스로 넘겼을때 넘어가는지)이 작동하게 됩니다.
swiper-pagination
이번엔 pagination입니다. 근데 뭔가 이상한 점이 눈에 띄어야 합니다. 위에서 작성한 html코드를 보면 저희는 swiper-pagination이라는 클래스를 가진 코드를 작성한적이 없습니다. 그 이유는 swiper api에서 가상으로 클래스를 만들어 넣어주기 때문이죠. 따라서 pagination은 이미 만들어져있고, 그것을 활성화 시키고 꾸며주기만 하면 됩니다. 그러면 pagination이 무슨 기능을 하느냐 하면...
위의 기능들을 담당합니다. 버튼을 통하여 왼쪽 오른쪽으로 이동하고(이것은 엄밀히 따지자면 swiper navigation기능입니다) 특정 페이지를 클릭하면 바로 넘어갈수있게 합니다. 우선 왼쪽의 버튼들부터 살펴보겠습니다.
pagination: {
el: ".banner .swiper-pagination",
clickable: true,
},
navigation: {
prevEl: ".banner .swiper-prev",
nextEl: ".banner .swiper-next",
},아까 만들었던 클래스의 해당 부분이 바로 pagination을 할당해주고, navigation 기능을 통하여 다음과 이전 슬라이드로 넘어갈수있게 해줍니다. 또한 눈에 띄는 버튼이 있을텐데요 바로 일시정지(autoplay를) 와 재생 버튼입니다. 해당 기능은 제가 따로 구현을 해주었습니다.
const btn_start = document.querySelector(".pagination-container .swiper-start");
const btn_pause = document.querySelector(".pagination-container .swiper-pause");
btn_start.addEventListener("click", function () {
mySwiper.autoplay.start();
btn_start.style.display = "none";
btn_pause.style.display = "block";
});
btn_pause.addEventListener("click", function () {
mySwiper.autoplay.stop();
btn_start.style.display = "block";
btn_pause.style.display = "none";
});querySelector로 해당(start,pause)클래스를 불러와줍니다. 그리고 클릭을할때마다 autoplay의 값을 바꿔주면 되는것입니다. 또한 재생과 멈춤이 번갈아나타나도록 display속성을 계속 바꿔주는 코드를 넣어주었습니다.
위와 같은 pagination속성을 통하여 저희는 버튼으로 page를 다룰수있게 되었습니다. 그러면 마지막 속성 swiper-pagination-bullet을 살펴보겠습니다.
swiper-pagination-bullet
마지막 특징입니다. 바로 bullet기능이죠. 이 클래스또한 저희는 만든적이 없지만... 역시나 가상 클래스로서 존재하고있습니다. 또한 이것의 기능이 뭐냐면
바로 요놈들입니다. 즉, 지금 page의 정보를 담고있는 하나의 작은 배너라고 볼 수있죠.
얘네들을 보면 이해가 가실겁니다. 이게 swiper-pagination-bullet의 원본입니다. 저 버튼을 누르면 해당 페이지로이동을 하고 bullet의 위치와 색상이 변하게 되겠죠. 그러나 인프런사이트를 보시면 알다시피 저렇게 밋밋한 bullet이 아닙니다. 따라서 bullet에 내용을 넘겨주어야하는데 그것이 쉽지않습니다(가상 클래스이기때문에 저희가 따로 내용을 html로 직접넣을수가없습니다). 따라서 JS를 사용해서 textContent로 내용을 넘겨주었습니다.
const spanEls = document.querySelectorAll(
".swiper-pagination .swiper-pagination-bullet"
);
const spanList = [
"왕초보 모여라 😎",
"입문 로드맵",
"Top 50 👑",
"지식공유신청",
"신규 강의 🎁",
"인프런 동료찾기",
"인프런은 🌱",
];
for (let i = 0; i < spanEls.length; i++) {
let item = spanEls.item(i);
item.textContent = spanList[i];
}queryselector로 불러온후 각 textcontent에 미리 넣어둔 배열값들을 저장하는식으로 처리했습니다.
위와같은 큰 컨테이너와 슬라이드, 그리고 세세한 가상 클래스들이 합쳐져서 저러한 배너가 완성이 되었습니다.
마치며
클론코딩 기간이 절반도 남지 않았습니다. 언능 해야겠네요. 그래도 swiper의 기초를 닦아두니 재활용만 하는 되는 경우가 생겨서 뒤에는 편하게 하지 않을까 싶습니다!
