问题描述
我想对滑块中的图像进行背景检查,以便对控件的颜色进行自适应更改。
我使用一个简单的滑块脚本在一个页面上有多个滑块并尝试使用 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
,但对叠加控件进行更多控制仍然很有趣。我什至可以使用一些额外的类来处理这个
解决方法
暂无找到可以解决该程序问题的有效方法,小编努力寻找整理中!
如果你已经找到好的解决方法,欢迎将解决方案带上本链接一起发送给小编。
小编邮箱:dio#foxmail.com (将#修改为@)