스와이프 슬라이드css부분 질문드립니다.
본문
https://swiperjs.com/demos/285-autoplay-progress/core
이거와 같은 스킨을 사요중입니다.
.autoplay-progress svg 이부분 에서 동그라미 돌면서 다음페이지로 넘어가는데
동그라미 말고 일자로 쭉펴지게끔 하고싶은데 방법이 궁금합니다.
.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
svg 수정하고 속도 조절 해주셔야해요
.html
<div class="autoplay-progress">
<svg viewBox="0 0 48 48">
<path d="M0 48 l48 0"></path>
</svg>
<span></span>
</div>
.css
.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;
}
이부분이 동그라미를 만드는 부분인데 일자로 바꾸려면 어떻게 해야할까요?
스와이프에서 제공하는 스킨을 변경하기 위해서는 스타일 속성을 변경하는 방법이 가장 좋습니다. 위의 예제에서는 특정 스타일 속성을 변경하여 동그라미가 일자로 변경되도록 할 수 있습니다. stroke-dashoffset 속성을 변경하여 동그라미가 일자로 변경되도록 할 수 있습니다. 또한 stroke-dasharray 속성도 변경하여 일자의 두께를 조절할 수 있습니다.
답변을 작성하시기 전에 로그인 해주세요.
