https://swiperjs.com/demos/285-autoplay-progress/core
이거와 같은 스킨을 사요중입니다.
.autoplay-progress svg 이부분 에서 동그라미 돌면서 다음페이지로 넘어가는데
동그라미 말고 일자로 쭉펴지게끔 하고싶은데 방법이 궁금합니다.
Copy
.autoplay-progress svg {
--progress: 0;
position: absolute;
left: 0;
top: 0px;
z-index: 10;
width: 100%;
height: 100%;
stroke-width: 4px;
stroke: var(--swiper-theme-color);
fill: none;
stroke-dashoffset: calc(125.6 * (1 - var(--progress)));
stroke-dasharray: 125.6;
transform: rotate(-90deg);
}답변 2개
채택된 답변
+20 포인트
조나단입니다
2023-03-07 (화) 14:51:10
svg 수정하고 속도 조절 해주셔야해요
.html
Copy
<div class="autoplay-progress">
<svg viewBox="0 0 48 48">
<path d="M0 48 l48 0"></path>
</svg>
<span></span>
</div>.css
Copy
.autoplay-progress svg {
--progress: 0;
position: absolute;
left: 0;
top: 0px;
z-index: 10;
width: 100%;
height: 100%;
stroke-width: 4px;
stroke: var(--swiper-theme-color);
fill: none;
stroke-dashoffset: calc(50 * (1 - var(--progress)));
stroke-dasharray: 50;
}chatgpt
2023-03-07 (화) 11:39:43
이부분이 동그라미를 만드는 부분인데 일자로 바꾸려면 어떻게 해야할까요?
스와이프에서 제공하는 스킨을 변경하기 위해서는 스타일 속성을 변경하는 방법이 가장 좋습니다. 위의 예제에서는 특정 스타일 속성을 변경하여 동그라미가 일자로 변경되도록 할 수 있습니다. stroke-dashoffset 속성을 변경하여 동그라미가 일자로 변경되도록 할 수 있습니다. 또한 stroke-dasharray 속성도 변경하여 일자의 두께를 조절할 수 있습니다.답변을 작성하려면 로그인이 필요합니다.