改变flickity样式:使用JS进行样式修改
P粉006847750
P粉006847750 2023-08-16 13:09:34
0
1
562
<p>我在使用js访问样式方面遇到了一个Flickity问题,具体来说,是指示点的样式。我希望这些点能够根据一个数组中的颜色进行着色(在我的项目中,这应该是一个动态数组,但为了简化测试案例,目前是静态的)。我的函数适用于与我在Flickity轮播下方的html中放置的指示点具有相同类名的元素。</p> <p>这是一个forked(从Flickity文档)和更改的CodePen,以说明我的问题:<br /> <a href="https://codepen.io/Insa-Deist/pen/jOXNOKM">https://codepen.io/Insa-Deist/pen/jOXNOKM</a></p> <p>提前感谢任何提示。</p> <p>我添加的js应该是正确的,我已经在不在Flickity轮播容器中的另一行点上尝试过,这些点具有js所讲的相同类名(当我打开我的项目的源代码时,指示点也具有相同的类名)。</p> <p>*刚刚收到一个警告,要求我也在这里粘贴代码,所以我就粘贴在这里了:</p> <p>html</p> <pre class="brush:php;toolbar:false;"><h1>Flickity - freeScroll, wrapAround</h1> <!-- Flickity HTML init --> <div class="carousel" 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> row of dots to show the js function with the color array --> ISSUE: i want the indicator dots from the carousel also be colored from that array, why is i not working even though they also have the .dot class assigned when I open the sourcecode of my project</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></前> <p>CSS</p>
/* 外部 css: flickity.css */

* { 框大小:边框框; }

正文 { 字体系列:无衬线体; }

.轮播{
  背景:#FAFAFA;
}

.carousel-cell {
  宽度:66%;
  高度:200px;
  右边距:10px;
  背景:#8C8;
  边框半径:5px;
  反增量:轮播单元;
}

/* 细胞数量 */
.carousel-cell:之前{
  显示:块;
  文本对齐:居中;
  内容:计数器(轮播单元);
  行高:200px;
  字体大小:80px;
  白颜色;
}

.点{
    显示:内联块;
    宽度:10px;
    高度:10px;
    边距:0 8 像素;
    边界半径:50%;
    不透明度:1;
    光标:指针;
}
.flickity-page-dots .dot{
  不透明度:1;
}
.flickity-page-dots .dot.is-selected {
  -webkit-过滤器:模糊(3px);
  -moz-过滤器:模糊(3px);
  -o-滤镜:模糊(3px);
  -ms-filter:模糊(3px);
  滤镜:模糊(3px);}
; <p>js</p>
//外部js:flickity.pkgd.js
var 颜色 = ["#e57373", "#ba68c8", "#90caf9", "#4db6ac", "#dce775", "#ffb74d", "#b0bec5", "#FF69B4"];
var customContainer = Array.from(document.querySelectorAll('.dot'));

customContainer.forEach(函数(节点, i) {
    节点.样式.背景 = 颜色[i % 颜色.长度];
});</pre>
<p><br />></p>            
P粉006847750
P粉006847750

全部回复(1)
P粉378890106

在codepen上尝试一下:

// 外部js: flickity.pkgd.js
    function changeColor(){
    var colors = ["#e57373", "#ba68c8", "#90caf9", "#4db6ac", "#dce775", "#ffb74d", "#b0bec5", "#FF69B4"];
    var customizeContainer = Array.from(document.querySelectorAll('.dot'));
    
    customizeContainer.forEach(function(node, i) {
        node.style.background = colors[i % colors.length];
        console.log(colors[i % colors.length]);
    });
    }
    var flkty = new Flickity( '.carousel', {
      on: {
        ready: function() {
         changeColor();
        }
      }
    });
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板