플릭키 스타일 변경: 스타일 수정을 위해 JS를 사용합니다.
P粉006847750
2023-08-16 13:09:34
<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>
코드펜에서 사용해 보세요:
으아악