我通过轻弹 V2 将灰度添加到.gallery-cell img，以及.is-selected滑块时如何删除它？ 同上：(https://codepen.io/irvingarmenta/pen/pyLJvv(
// for an individual element
var flky = new Flickity('.gallery', {
// options, defaults listed
accessibility: true,
// enable keyboard navigation, pressing left & right keys
adaptiveHeight: false,
// set carousel height to the selected slide
autoPlay: 2000,
// advances to the next cell
// if true, default is 3 seconds
// or set time between advances in milliseconds
// i.e. `autoPlay: 1000` will advance every 1 second
cellAlign: 'center',
// alignment of cells, 'center', 'left', or 'right'
// or a decimal 0-1, 0 is beginning (left) of container, 1 is end (right)
cellSelector: undefined,
// specify selector for cell elements
contain: true,
// will contain cells to container
// so no excess scroll at beginning or end
// has no effect if wrapAround is enabled
draggable: '>1',
// enables dragging & flicking
// if at least 2 cells
dragThreshold: 3,
// number of pixels a user must scroll horizontally to start dragging
// increase to allow more room for vertical scroll for touch devices
freeScroll: true,
// enables content to be freely scrolled and flicked
// without aligning cells
friction: 0.2,
// smaller number = easier to flick farther
groupCells: false,
// group cells together in slides
initialIndex: 0,
// zero-based index of the initial selected cell
lazyLoad: true,
// enable lazy-loading images
// set img data-flickity-lazyload="src.jpg"
// set to number to load images adjacent cells
percentPosition: true,
// sets positioning in percent values, rather than pixels
// Enable if items have percent widths
// Disable if items have pixel widths, like images
prevNextButtons: true,
// creates and enables buttons to click to previous & next cells
pageDots: true,
// create and enable page dots
resize: true,
// listens to window resize events to adjust size & positions
rightToLeft: true,
// enables right-to-left layout
setGallerySize: true,
// sets the height of gallery
// disable if gallery already has height set with CSS
watchCSS: false,
// watches the content of :after of the element
// activates if #element:after { content: 'flickity' }
wrapAround: true
// at end of cells, wraps-around to first for infinite scrolling
});/* external css: flickity.css */
* {
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
body {
font-family: sans-serif;
}
.gallery {
background: #EEE;
}
.gallery-cell {
width: 33.3%;
height: 300px;
margin-right: 10px;
background: #8C8;
text-align: center;
} &.is-selected {
img {
transform: scale(1);
-webkit-filter: grayscale(0) blur(0);
filter: grayscale(0) blur(0);
}
}
.gallery-cell img {
display: inline-block;
transform: scale(0.7);
-webkit-filter: grayscale(100%)blur(1.5px);
filter: grayscale(100%)blur(1.5px);
}
/* cell number */
.gallery-cell:before {
display: block;
text-align: center;
/* content: counter(gallery-cell); */
line-height: 200px;
font-size: 80px;
color: white;
}
@media (max-width: 767px) {
.gallery-cell {
height: 200px;
width: 100%;
}
}<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://unpkg.com/flickity@2/dist/flickity.min.css">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="https://unpkg.com/flickity@2/dist/flickity.pkgd.min.js"></script>
</head>
<body>
<!-- Flickity HTML init -->
<div class="gallery js-flickity">
<div class="gallery-cell">
<img src="https://seeklogo.com/images/H/huawei-logo-B8D40C4904-seeklogo.com.png" />
</div>
<div class="gallery-cell">
<img src="https://seeklogo.com/images/T/tsm-logo-8DCBE4D37B-seeklogo.com.png" />
</div>
<div class="gallery-cell">
<img src="https://seeklogo.com/images/H/huawei-logo-B8D40C4904-seeklogo.com.png" />
</div>
<div class="gallery-cell">
<img src="https://seeklogo.com/images/T/tsm-logo-8DCBE4D37B-seeklogo.com.png" />
</div>
<div class="gallery-cell">
<img src="https://seeklogo.com/images/H/huawei-logo-B8D40C4904-seeklogo.com.png" />
</div>
</div>
</body>
</html>只需添加到您的 CSS 中：
.gallery-cell.is-selected img {
-webkit-transform: scale(1);
transform: scale(1);
-webkit-filter: grayscale(0) blur(0);
filter: grayscale(0) blur(0);
}
您定义了常规磁贴的样式，但还需要为isSelected磁贴定义