如何使滑块的上一个和下一个图像更暗

问题描述

我找到了滑块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%)");
});