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

【问题标题】：How to make prev&next image of slider darker如何使滑块的上一个和下一个图像更暗
【发布时间】：2020-12-04 07:49:28
【问题描述】：

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

【问题讨论】：

你能添加一个工作的 sn-p 来证明你的问题吗？
sry，我昨天在这里注册了。很多都不知道。您可以将我的代码粘贴到codepen.io/glebkema/pen/daLzpL js 文件中，您会看到。
我看到你的问题已经有了答案，但是下次当你在创建问题时按ctr + m 时，你会得到 sn-p 提示，你可以在那里编写代码，这样人们就可以轻松重现问题！ :)

标签： jquery css bootstrap-4 carousel

【解决方案1】：

在next 和prev 部分的.clone().appendTo() 指令之后链接.css() 指令（如我的“NEXT LINE DOWN”cmets 所示）。

$('.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%)");
});

【讨论】：