多个滑块的背景检查

如何解决多个滑块的背景检查

我想对滑块中的图像进行背景检查，以便对控件的颜色进行自适应更改。

我使用一个简单的滑块脚本在一个页面上有多个滑块并尝试使用 https://github.com/kennethcachia/Background-Check。

现在，该页面上的示例是针对单个滑块的，我认为该脚本不起作用，因为检查了所有图像。我想我只需要在这个 (.this) 滑块中检查类名或图像。如何仅在特定滑块中检查类？

jQuery(document).ready(function($) {
    $('.simple-slider-wrapper').each(function() {
        const this_slider = $(this);
       
        const slides = this_slider.find('ul li');
        const control_prev = this_slider.find('.control_prev');
        const control_next = this_slider.find('.control_next');

        function slider_init() {
            if (slides.length > 1) {
                control_prev.css('display','block');
                control_next.css("display","block");
            }
            
        }
        slider_init();

        
        function backgroundcheck_init() {
            BackgroundCheck.init({
              targets: '.control',//< this slider?
              images: 'images'      //< this images?
            });
        }
        //backgroundcheck_init();

        
        function moveRight() {
            // move last child to beginning of list and set list position to -100%
            this_slider.find('ul li:last-child').prependTo(this_slider.find('ul'));
            slides.css('left','-100%');
            // move all list elements to right
            slides.stop().animate({ left: 0 },500);
        };

        function moveLeft() {
            // move all list elements to left
            const arr = [ slides.stop().animate({ left: '-100%' },500).promise() ]
            // after animation end move first child to end of list and set list position to 0
            $.when.apply($,arr).then(function() {
                this_slider.find('ul li:first-child').appendTo(this_slider.find('ul'));
                slides.css('left',0);
            });
        };

        control_prev.on("click",function () {
            if (slides.length > 1) {
                moveRight();
                //< place for BackgroundCheckRefresh
            }
        });

        control_next.on("click",function () {
            if (slides.length > 1) {
                moveLeft();
                //< place for BackgroundCheckRefresh
            }
        });
    });

});

与此同时，我将使用 mix-blend-mode，但对叠加控件进行更多控制仍然很有趣。我什至可以使用一些额外的类来处理这个