슬라이더 진행 표시줄이 슬라이드 수와 일치하지 않습니다.
P粉587780103
2023-08-25 16:17:45
<p><code>7</code> 항목이 포함된 캐러셀을 만들었습니다. </p>
<p>기본적으로 이 캐러셀은 <code>5</code> 항목을 표시합니다. </p>
<p>시연하는 동안 두 가지 문제에 부딪혔습니다. </p>
<올>
슬라이더가 무한 루프로 설정되어 있는데 슬라이드 1로 돌아갈 때 진행 표시줄이 재설정되지 않습니다. </li>
<li>슬라이더가 끝에 도달하면 즉시 슬라이드 1로 다시 이동합니다(부드러운 전환 대신). </li>
<li>7번째 슬라이드(7번째 카드)가 표시되면 진행률 표시줄이 완료됩니다. </li>
</ol>
<p><code>$slider.slick("getSlick").slideCount</code>의 <code>console.log</code>는 슬라이더의 항목 수인 7을 반환합니다. 따라서 이러한 문제의 원인이 무엇인지 확실하지 않습니다.</p>
<p></p>
<pre class="brush:js;toolbar:false;">(function($) {
const $slider = $('#slider');
var $progressBar = $('.progressBar__bar');
$slider.on('beforeChange', function(event, slick, currentSlide, nextSlide) {
var calc = ((nextSlide) / (slick.slideCount - 1)) * 100;
$progressBar.css('배경 크기', calc + '% 100%').attr('aria-valuenow', calc);
});
$slider.slick({
슬라이드투쇼: 5,
슬라이드투스크롤: 1,
속도: 400,
화살표: 사실,
mobileFirst: 사실,
});
})(jQuery);</pre>
<pre class="brush:css;toolbar:false;">.cardSlider {
패딩: 100px 0;
배경: 검정색;
색상: 흰색;
}
.카드 {
검정색;
패딩: 50px;
텍스트 정렬: 중앙;
}
.progressBar__bar {
여백 상단: 82px;
위치: 상대;
디스플레이: 블록;
너비: 100%;
높이: 3px;
오버플로: 숨김;
배경 이미지: 선형 그라데이션(오른쪽, 노란색, 노란색);
background-repeat: 반복하지 않음;
배경 크기: 5% 100%;
전환: 배경 크기 0.5초 Ease-in-out;
}
.progressBar__bar[aria-valuenow="0"] {
배경 크기: 5% 100% !중요;
}
.progressBar__bar[aria-valuenow] {
높이: 5px;
}
.progressBar__bar:이전 {
콘텐츠: "";
위치: 절대;
왼쪽: 0;
최고: 50%;
변환: 변환(0%, -50%);
너비: 100%;
높이: 0.5pt;
배경색: 흰색;
}
.slick-슬라이드 {
여백: 0px 10px;
디스플레이: 없음;
왼쪽으로 뜨다;
높이: 100%;
최소 높이: 1px;
개요: 없음!중요;
}
.slick-slide.slick-로딩 {
디스플레이: 없음;
}
.slick-slide.drag img {
포인터 이벤트: 없음;
}
.slick-slide img {
너비: 100%;
디스플레이: 블록;
}
.slick-슬라이더 {
위치: 상대;
디스플레이: 블록;
상자 크기 조정: 테두리 상자;
-webkit-touch-callout: 없음;
-khtml-사용자 선택: 없음;
터치 액션: pan-y;
-webkit-tap-highlight-color: 투명;
}
.슬릭리스트 {
위치: 상대;
디스플레이: 블록;
오버플로: 숨김;
여백: 0;
패딩: 0;
}
.slick-list:초점 {
개요: 없음;
}
.slick-list.드래깅 {
커서: 포인터;
커서: 손;
}
.slick-트랙,
.슬릭리스트 {
변환: 번역3d(0, 0, 0);
전환: 모두 150ms 용이성;
}
.slick-트랙 {
위치: 상대;
상단: 0;
왼쪽: 0;
항목 정렬: 중앙;
너비: 100%;
}
.slick-track:이전,
.slick-track:이후 {
디스플레이: 테이블;
콘텐츠: "";
}
.slick-track:이후 {
명확함: 둘 다;
}
.slick-초기화 .slick-슬라이드 {
디스플레이: 블록;
}</pre>
<pre class="brush:html;toolbar:false;"><script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"> ;</스크립트>
<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick-theme.css" rel="stylesheet"/>
<section class="cardSlider">
<div class="컨테이너">
<div class="행">
<div class="col-12">
<div class="cardSlider__listing" id="slider">
<article class="카드">
카드 1
</기사>
<article class="카드">
카드 2
</기사>
<article class="카드">
카드 3
</기사>
<article class="카드">
카드 4
</기사>
<article class="카드">
카드 5
</기사>
<article class="카드">
카드 6
</기사>
<article class="카드">
카드 7
</기사>
</div>
</div>
</div>
<div class="행">
<div class="col-12">
<div class="progressBar">
<div class="progressBar__bar" role="progressbar" aria-valuemin="0" aria-valuemax="100"></div>
</div>
</div>
</div>
</div>
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
현재 코드에서 진행률 표시줄이 제대로 작동하는 것 같습니다.
부드러운 전환에 관해 두 번째로 말씀하신 점에 대해서는 코드에서 다음 CSS를 제거하고 시도해 보세요.
으아악업데이트
아래 변경 사항을 검토해 주세요. 여기에 Codepen 링크도 첨부했습니다: https://codepen.io/nandu1993/pen/xxjdZjd
으아악