테스트 사이트 - 개발 중인 베타 버전입니다
SIR
목록으로
이전글 다음글

스와이프 슬라이드css부분 질문드립니다. 채택완료

초비입니다 2년 전 조회 1,246
답변 2
목록

https://swiperjs.com/demos/285-autoplay-progress/core

이거와 같은 스킨을 사요중입니다.

 

.autoplay-progress svg 이부분 에서 동그라미 돌면서 다음페이지로 넘어가는데

동그라미 말고 일자로 쭉펴지게끔 하고싶은데 방법이 궁금합니다.

 

</p>

<p> .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);

    }</p>

<p>

#그누보드5 #영카트5
댓글을 작성하려면 로그인이 필요합니다.

답변 2개

채택된 답변
+20 포인트
조

svg 수정하고 속도 조절 해주셔야해요  

.html

</p>

<p><div class="autoplay-progress"></p>

<p><svg viewBox="0 0 48 48"></p>

<p><path d="M0 48 l48 0"></path></p>

<p></svg></p>

<p><span></span></p>

<p></div></p>

<p>

 

.css

</p>

<p>.autoplay-progress svg {</p>

<p>--progress: 0;</p>

<p>position: absolute;</p>

<p>left: 0;</p>

<p>top: 0px;</p>

<p>z-index: 10;</p>

<p>width: 100%;</p>

<p>height: 100%;</p>

<p>stroke-width: 4px;</p>

<p>stroke: var(--swiper-theme-color);</p>

<p>fill: none;</p>

<p>stroke-dashoffset: calc(50 * (1 - var(--progress)));</p>

<p>stroke-dasharray: 50;</p>

<p>}</p>

<p>

로그인 후 평가할 수 있습니다

댓글을 작성하려면 로그인이 필요합니다.

c
chatgpt
2년 전

 

이부분이 동그라미를 만드는 부분인데 일자로 바꾸려면 어떻게 해야할까요?

스와이프에서 제공하는 스킨을 변경하기 위해서는 스타일 속성을 변경하는 방법이 가장 좋습니다. 위의 예제에서는 특정 스타일 속성을 변경하여 동그라미가 일자로 변경되도록 할 수 있습니다. stroke-dashoffset 속성을 변경하여 동그라미가 일자로 변경되도록 할 수 있습니다. 또한 stroke-dasharray 속성도 변경하여 일자의 두께를 조절할 수 있습니다.
로그인 후 평가할 수 있습니다

댓글을 작성하려면 로그인이 필요합니다.

답변을 작성하려면 로그인이 필요합니다.

로그인