使用Slick Carousel进行自定义布局

Question

我目前正在使用光滑的旋转木马。目前，我有一个非常简单的布局

<div class="container">
  <div class="row">
      <div class="col-md-4"></div>
      <div class="col-md-8">
        <div class="imageSlide">
          <div><img src="http://www.atfund.gatech.edu/sites/default/files/images/verticalplaceholderimage-440x680.png" class=""></div>
          <div><img src="http://www.atfund.gatech.edu/sites/default/files/images/verticalplaceholderimage-440x680.png" class=""></div>
          <div><img src="http://www.atfund.gatech.edu/sites/default/files/images/verticalplaceholderimage-440x680.png" class=""></div>
        </div>
      </div>
  </div>
</div>

我已将其设置为使用中心模式

$('.imageSlide').slick({
    infinite: true,
    centerMode: true,
    centerPadding: '60px',
    slidesToShow: 1,
    slidesToScroll: 1
});

这会产生预期的结果here

我遇到的问题是自定义此问题。我正在进行如下布局

所以我希望将主图像作为焦点，右侧显示另外2个图像，不透明度较低。单击导航时，焦点图像将消失，下一个图像将成为焦点。没有任何东西应该显示在聚焦图像的左侧，但总是两个显示在右侧。

我已经搜索了一个可以执行此操作的插件的高低，但没有任何具体内容。

是否有可能实现光滑，还是有其他方式可以实现这种效果？

由于