使用 flickity 滑块向图像添加和删除灰度效果

Question

我通过 flickity 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>

Answer 1

只需添加到您的 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 图块定义样式

使用 flickity 滑块向图像添加和删除灰度效果

Add and remove grayscale effect to Image using flickity slider

html

javascript

css

flickity