플릭키 스타일 변경: 스타일 수정을 위해 JS를 사용합니다.

Question

js를 사용하여 스타일, 특히 표시기 포인트 스타일에 액세스할 때 Flickity 문제가 발생했습니다. 배열의 색상을 기반으로 점의 색상을 지정하고 싶습니다(내 프로젝트에서는 동적 배열이어야 하지만 현재는 테스트 사례를 단순화하기 위해 정적입니다). 내 기능은 Flickity 캐러셀 아래 HTML에 넣은 표시기 포인트와 동일한 클래스 이름을 가진 요소에서 작동합니다.

이것은 내 문제를 설명하기 위해 Flickity 문서에서 분기되고 변경된 CodePen입니다. https://codepen.io/Insa-Deist/pen/jOXNOKM

어떤 조언이라도 미리 감사드립니다.

내가 추가한 js는 정확해야 합니다. Flickity 캐러셀 컨테이너에 없고 js가 말하는 것과 동일한 클래스 이름을 가진 다른 지점 라인에서 시도해 보았습니다(내 소스 코드를 열 때). project 의 경우 큐 포인트도 동일한 클래스 이름을 갖습니다).

*여기에도 코드를 붙여넣으라는 경고가 있어서 여기에 붙여넣습니다.

html

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

css

/* 외부 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);}

js

// 외부 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 % 색상.길이];
});

Answer 1

코드펜에서 사용해 보세요:

으아악