슬라이더 진행 표시줄이 슬라이드 수와 일치하지 않습니다.

Question

<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>

Answer 1

현재 코드에서 진행률 표시줄이 제대로 작동하는 것 같습니다.

부드러운 전환에 관해 두 번째로 말씀하신 점에 대해서는 코드에서 다음 CSS를 제거하고 시도해 보세요.

으아악

업데이트

아래 변경 사항을 검토해 주세요. 여기에 Codepen 링크도 첨부했습니다: https://codepen.io/nandu1993/pen/xxjdZjd

으아악