안녕하세요 찐망고입니다.
이전 swiper포스팅에서 pagination의 type을 progressbar로 만들어서 로딩바를 만들어봤는데요
2022.06.08 - [플러그인/swiper] - swiper 슬라이더 연결하기
swiper 슬라이더 연결하기
안녕하세요 찐망고입니다. 오랜만...이라는 글을 언제쯤 안쓸 수 있을까요? 중요한건 제 모든 포스팅이 예약 포스팅이라는 겁니다..🤣 오늘은 swiper슬라이더에 관련된 포스팅을 하려고 합니다.
uiweb.tistory.com
swiper autoplay-progress
https://codesandbox.io/p/sandbox/5d6tdn?file=%2Findex.html%3A1%2C1
swiper-autoplay-progress
CodeSandbox is an online editor tailored for web applications.
codesandbox.io
swiper에 autoplay-progress가 업데이트 되었더라구요~
보니까 svg를 circle형태로 만들어서 슬라이드가 돌아가는 동안 돌아가게 만들었는데요
똑같이 circle로 만드는건 재미없으니까 우리는 라인으로 만들어볼게요
이번 수업 예제인 센추리21 컨트리클럽의 슬라이드를 svg progress를 이용해서 만들어봤습니다.
https://www.century21cc.co.kr/
센추리21 컨트리클럽
대자연 속에서 즐기는 골프와 힐링 라운드 센추리21CC
www.century21cc.co.kr
<body>
<section class="visual-sec">
<div class="swiper main-swiper">
<div class="swiper-wrapper">
<div class="swiper-slide">
<div class="txt-box">
<h3 class="txt">대자연과 조화를 이루는<br>최적의 명품 코스</h3>
<p>신비로운 자연경관을 바라보며 바람을 가르다.</p>
</div>
<picture class="img-box">
<source srcset="img/main-img-01.jpg" media="screen and (min-width: 981px)">
<img src="img/main-img-01-m@3x.jpg" alt="">
</picture>
</div>
<div class="swiper-slide">
<div class="txt-box">
<h3 class="txt">대자연 속에서 즐기는<br>골프와 힐링 라운드</h3>
<p>자연이 살아 숨 쉬는 곳, 센추리21CC</p>
</div>
<picture class="img-box">
<source srcset="img/main-img-02.jpg" media="screen and (min-width: 981px)">
<img src="img/main-img-02-m@3x.jpg" alt="">
</picture>
</div>
<div class="swiper-slide">
<div class="txt-box">
<h3 class="txt">신이 빚어 놓은<br>환상의 골프 코스</h3>
<p>자연이 만들어낸 아름다움을 품은 최고의 컨트리클럽</p>
</div>
<picture class="img-box">
<source srcset="img/main-img-03.jpg" media="screen and (min-width: 981px)">
<img src="img/main-img-03-m@3x.jpg" alt="">
</picture>
</div>
<div class="swiper-slide">
<div class="txt-box">
<h3 class="txt">운치있는 라운드,<br>자연과 함께하는 센추리21</h3>
<p>청명한 하늘과 푸른 들판이 함께하는 공간</p>
</div>
<picture class="img-box">
<source srcset="img/main-img-04.jpg" media="screen and (min-width: 981px)">
<img src="img/main-img-04-m@3x.jpg" alt="">
</picture>
</div>
</div>
<div class="all-box">
<div class="progress-box">
<div class="swiper-pagination"></div>
<div class="autoplay-progress">
<svg viewBox="0 0 100 10">
<line x1="0" y1="0" x2="100" y2="0">
</svg>
</div>
</div>
<div class="arrow-box">
<div class="swiper-button-prev"></div>
<div class="swiper-button-next"></div>
</div>
</div>
</div>
</section>
</body>HTML은 일반적인 swiper구조로 마크업 하면 되는데요.
차이점이 있다면
<div class="all-box">
<div class="progress-box">
<div class="swiper-pagination"></div>
<div class="autoplay-progress">
<svg viewBox="0 0 100 10">
<line x1="0" y1="0" x2="100" y2="0">
</svg>
</div>
</div>
<div class="arrow-box">
<div class="swiper-button-prev"></div>
<div class="swiper-button-next"></div>
</div>
</div>이 부분이죠 라인에 해당하는 svg를 하나 만들었어요
굳이 all-box클래스를 가진 div를 만든건 한번에 위치를 이동하기 위해서구요~
.visual-sec .all-box {
position: absolute;
display: inline-flex;
width: 90%;
height: 50px;
left: 50%;
bottom: 10px;
box-sizing: border-box;
padding: 0 20px;
transform: translate(-50%, -50%);
z-index: 20;
}
.visual-sec .progress-box {
position: relative;
width: 170px;
height: 50px;
z-index: 11;
}
.autoplay-progress {
position: absolute;
left: 30px;
top: 10px;
z-index: 10;
width: 100px;
height: 3px;
background-color: rgba(0, 0, 0, 0.1);
}
.autoplay-progress svg {
--progress: 0;
position: absolute;
left: 0;
top: 0;
z-index: 10;
width: 100%;
stroke-width: 4px;
stroke: #fff;
fill: none;
stroke-dashoffset: calc(100 * (1 - var(--progress)));
stroke-dasharray: 100;
}
/*
stroke-dashoffset은 선의 테두리가 얼마나 이동하는지 결정 progress라는 변수를 사용하여 계산되어진 값이 들어감 100은전체길이
stroke-dasharray는 선의 테두리를 구성하는 선 조각의 길이를 설정 전체길이가 100
*/progress쪽 css만 추가로 보면
.autoplay-progress 의 위치값과 가로세로길이를 수정했구요
백그라운드컬러를 추가했습니다.
.autoplay-progress svg 부분도
전체 svg길이를 기준으로 dashoffset을 이용해서 1/n씩 움직이게 해줬구요
참고로 svg 포스팅을 할때 다시 이야기 하긴 할건데,
콘솔창에
console.log(document.querySelector('line').getTotalLength());getTotalLength()를 사용하면 전체 svg의 길이를 체크할 수 있습니다.
const progressLine = document.querySelector('.autoplay-progress svg')
const mainSwiper = new Swiper(".main-swiper", {
loop: true,
autoplay: {
delay: 2500,
disableOnInteraction: false,
},
// bullet
pagination: {
el: ".main-swiper .swiper-pagination",
clickable: false,
type: "custom",
renderCustom: function (swiper, current, total) {
return (
'<span class="current">' + 0 + (current) + '</span>' + '<span class="total">' + 0 + (total) + '</span>'
);
}
},
//arrow
navigation: {
nextEl: ".main-swiper .swiper-button-next",
prevEl: ".main-swiper .swiper-button-prev",
},
// svg
on: {
autoplayTimeLeft(s, time, progress) {
progressLine.style.setProperty("--progress", 1 - progress)
}
}
});renderCustom: function (swiper, current, total) {
return (
'<span class="current">' + 0 + (current) + '</span>' + '<span class="total">' + 0 + (total) + '</span>'
);
}
// 백틱 코드변경
renderCustom: function(swiper, current, total) {
return `<span class="current">${current < 10 ? '0' + current : current}</span><span class="total">${total < 10 ? '0' + total : total}</span>`;
}
이젠 모든 로딩바들은 svg로 변경해도 될 것 같아요
See the Pen swiper-svg-progress by 찐망고 (@nnwbliyz-the-styleful) on CodePen.
'플러그인 > swiper' 카테고리의 다른 글
| swiper 무한 자동 롤링 기능 구현 speed 속도 (2) | 2024.02.29 |
|---|---|
| swiper pagination 커스텀 - 텍스트로 변경하기 (0) | 2023.11.07 |
| swiper) Centered Mode - loopedSlides (2) | 2023.06.13 |
| swiper) slideTo()를 써보자! (0) | 2023.06.10 |
| swiper-effect-creative (1) | 2023.06.06 |