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

Question

我找到了这个滑块示例 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));
});

Answer 1

在 next 和 prev 部分的 .clone().appendTo() 指令之后链接 .css() 指令 （如我的“下一行”所示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%)");
});

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

How to make prev&next image of slider darker

css

jquery

carousel

bootstrap-4