如何解决如何使滑块的上一个和下一个图像更暗
我找到了滑块https://codepen.io/glebkema/pen/daLzpL的示例。
我通过添加以下内容使上一个和下一个图像变暗: prev.children(':nth-last-child(3)').css('filter',"brightness(50%)");
和 prev.children(':nth-last-child(1)').css('filter',"brightness(50%)");
但是它不适用于上一张图片的最后一张幻灯片。有人知道吗?
$('.carousel-item','.show-neighbors').each(function(){
var next = $(this).next();
if (! next.length) {
next = $(this).siblings(':first');
}
next.children(':first-child').clone().appendTo($(this));
}).each(function(){
var prev = $(this).prev();
if (! prev.length) {
prev = $(this).siblings(':last');
}
prev.children(':nth-last-child(3)').css('filter',"brightness(50%)");
prev.children(':nth-last-child(1)').css('filter',"brightness(50%)");
prev.children(':nth-last-child(2)').clone().prependTo($(this));
});
解决方法
在.css()
和.clone().appendTo()
部分的next
指令之后,将prev
指令束缚在上(如我的“ NEXT LINE DOWN”注释所示)
$('.carousel-item','.show-neighbors').each(function(){
var next = $(this).next();
if (! next.length) {
next = $(this).siblings(':first');
}
//NEXT LINE DOWN
next.children(':first-child').clone().appendTo($(this)).css('filter',"brightness(50%)");
}).each(function(){
var prev = $(this).prev();
if (! prev.length) {
prev = $(this).siblings(':last');
}
//NEXT LINE DOWN
prev.children(':nth-last-child(2)').clone().prependTo($(this)).css('filter',"brightness(50%)");
});
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。