<p>js를 사용하여 스타일, 특히 표시기 포인트 스타일에 액세스할 때 Flickity 문제가 발생했습니다. 배열의 색상을 기반으로 점의 색상을 지정하고 싶습니다(내 프로젝트에서는 동적 배열이어야 하지만 현재는 테스트 사례를 단순화하기 위해 정적입니다). 내 기능은 Flickity 캐러셀 아래 HTML에 넣은 표시기 포인트와 동일한 클래스 이름을 가진 요소에서 작동합니다. </p> <p>이것은 내 문제를 설명하기 위해 Flickity 문서에서 분기되고 변경된 CodePen입니다. <a href="https://codepen.io/Insa-Deist/pen/ jOXNOKM" >https://codepen.io/Insa-Deist/pen/jOXNOKM</a></p> <p>어떤 조언이라도 미리 감사드립니다. </p> <p>내가 추가한 js는 정확해야 합니다. Flickity 캐러셀 컨테이너에 없고 js가 말하는 것과 동일한 클래스 이름을 가진 다른 지점 라인에서 시도해 보았습니다(내 소스 코드를 열 때). project 의 경우 큐 포인트도 동일한 클래스 이름을 갖습니다). </p> <p>*여기에도 코드를 붙여넣으라는 경고가 있어서 여기에 붙여넣습니다. </p> <p>html</p> <pre class="brush:php;toolbar:false;"><h1>Flickity - freeScroll, WrapAround</h1> <!-- 플릭티 HTML 초기화 --> <div class="캐러셀" data-flickity='{ "freeScroll": true, "wrapAround": true }'> <div class="carousel-cell"></div> <div class="carousel-cell"></div> <div class="carousel-cell"></div> <div class="carousel-cell"></div> <div class="carousel-cell"></div> </div> <br><br><br> <p> 색상 배열로 js 함수를 표시하는 점 행 --> 문제: 캐러셀의 표시기 점에도 해당 배열의 색상이 지정되기를 원하는데 .dot가 있음에도 불구하고 작동하지 않는 이유는 무엇입니까? 내 프로젝트의 소스코드를 열 때 할당된 클래스</p> <div class"flickity-page-dots"> <li class="dot"></li> <li class="dot"></li> <li class="dot"></li> <li class="dot"></li> <li class="dot"></li> </div></pre> <p>css</p> <pre class="brush:php;toolbar:false;">/* 외부 CSS: flickity.css */ * { 상자 크기: 테두리 상자; } 본문 { 글꼴 계열: 산세리프; } .캐러셀 { 배경: #FAFAFA; } .carousel-cell { 너비: 66%; 높이: 200px; 오른쪽 여백: 10px; 배경: #8C8; 테두리 반경: 5px; 역증분: 캐러셀 셀; } /* 셀 번호 */ .carousel-cell:이전 { 디스플레이: 블록; 텍스트 정렬: 중앙; 내용: counter(carousel-cell); 줄 높이: 200px; 글꼴 크기: 80px; 색상: 흰색; } .점 { 디스플레이: 인라인 블록; 너비: 10px; 높이: 10px; 여백: 0 8px; 테두리 반경: 50%; 불투명도: 1; 커서: 포인터; } .flickity-페이지-점 .dot{ 불투명도: 1; } .flickity-page-dots .dot.is-selected { -webkit-filter: 흐림(3px); -moz-filter: 흐림(3px); -o-filter: 흐림(3px); -ms-필터: 흐림(3px); 필터: 흐림(3px);}</pre> <p>js</p> <pre class="brush:php;toolbar:false;">// 외부 js: flickity.pkgd.js var colors = ["#e57373", "#ba68c8", "#90caf9", "#4db6ac", "#dce775", "#ffb74d", "#b0bec5", "#FF69B4"]; varcustomContainer=Array.from(document.querySelectorAll('.dot')); customContainer.forEach(함수(노드, i) { node.style.Background = 색상[i % 색상.길이]; });</pre> <p><br /></p>