Question

我正在使用slick.js插件来创建幻灯片。没有缩略图导航条。

我在任何给定时间都有三张幻灯片。我希望中间的幻灯片很明亮，但是它两边的幻灯片都会变暗。

我认为这样做的方法是设置.slide-active类的样式，但似乎这个类被附加到幻灯片中的每个幻灯片上（显然是一个bug）。

有人知道如何将幻灯片活动课程附加到中心幻灯片吗？

HTML：

<div class="slick_slideshow1">
  <div>
    <img src="img/slideshow1/slide1.jpg"  />

  </div>
  <div>
    <img src="img/slideshow1/slide2.jpg"  />

  </div>
 <div>
    <img src="img/slideshow1/slide3.jpg"  />

  </div>
  <div>
    <img src="img/slideshow1/slide4.jpg"  />

  </div>
  <div>
    <img src="img/slideshow1/slide5.jpg"  />

  </div>
  <div>
    <img src="img/slideshow1/slide6.jpg" />

  </div>

</div>

css :(添加到slick.css文件中）

 .slick-slide
{
    display: none;
    float: left;

    height: 100%;
    min-height: 1px;
    filter: brightness(30%);
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=30)";
  filter: alpha(opacity=30);
    -webkit-filter: brightness(30%);
    -moz-filter: brightness(30%);
}

jquery的：

$('.slick_slideshow1').slick({
    'accessibility': 'true',
    'adaptiveHeight': 'true',
    'centerMode': 'true',
    'centerPadding': '0px',
    'slidesPerRow': '3',
    'slidesToShow': '3'

  });

Answer 1

问题是我在物业及其价值周围留下的刻度线。当我删除它们时：

 $('.slick_slideshow1').slick({
    accessibility: true,
    adaptiveHeight: true,
    centerMode: true,
    centerPadding: '0px',
    slidesPerRow: 3,
    slidesToShow: 3
    });

...然后我可以通过设置.slick-center类的样式来设置中心幻灯片的样式：

    .slick-center  {
    filter: brightness(100%);
    -webkit-filter: brightness(100%);
    -moz-filter: brightness(100%);
 }

在光滑的幻灯片中，只想让中心幻灯片处于活动状态

1 个答案: