光滑的滑块改变第一个和最后一个项目的不透明度答案

【问题标题】：Slick slider change opacity of first and last items光滑的滑块改变第一个和最后一个项目的不透明度
【发布时间】：2020-05-25 11:47:16
【问题描述】：

我想更改光滑滑块的第一项和最后一项的不透明度。现在，中心模式设置为 true，但我找不到 CSS 选择器来实现这一点。这是我真正需要的：

这是我当前的代码。

HTML

   <div id="home_latest">
      <div class="item">
         <img src="default.jpg">
      </div>
      <div class="item">
         <img src="default.jpg">
      </div>
      <div class="item">
         <img src="default.jpg">
      </div>
      <div class="item">
         <img src="default.jpg">
      </div>
      <div class="item">
         <img src="default.jpg">
      </div>
      <div class="item">
         <img src="default.jpg">
      </div>
      <div class="item">
         <img src="default.jpg">
      </div>
      <div class="item">
         <img src="default.jpg">
      </div>
   </div>
</div>

jQuery('#home_latest').slick({
     slidesToShow: 4,
     centerMode: true,
     dots: false,
     centerPadding: '220px',
     prevArrow: "<a href='javascript:void(0)' class='slick_slider_nav slick_slider_nav_left'><img src='assets/img/slider-left-arrow.png'></a>",
     nextArrow: "<a href='javascript:void(0)' class='slick_slider_nav slick_slider_nav_right'><img src='assets/img/slider-right-arrow.png'></a>",
  });

JSFiddle

谢谢

【问题讨论】：

标签： jquery css slick.js

【解决方案1】：

你可以这样做

.slick-slide:not(.slick-active) {
   opacity: 0.5;
}

光滑的滑块在屏幕上当前显示/活动的元素上添加 slick-active 类

【讨论】：

感谢您的回复。但这不起作用。在这里结帐小提琴jsfiddle.net/rahulna/9y2mfqtp/32
jsfiddle.net/ab3um6xL 我认为问题出在slidesToShow，如果你使用任何奇数它可以正常工作，但如果是偶数它会失败
是的，有没有办法使用偶数？我想展示四个。谢谢。
使用一些自定义 CSS 和 javascript，我解决了这个问题。感谢您的帮助。
嘿@rahul 我能看到你的代码吗？我也面临这个问题

【解决方案2】：

你可以试试这个

#home_latest [aria-hidden="true"] {
   opacity: 0.5;
}

【讨论】：