kdcsライブラリー

Slick.jsでカルーセル表示させたときに両サイドの部分（非アクティブ）を薄く見せる
※サンプルは、幅1080px 縦400pxの画像を使用した場合
※centerMode true slidesToShow 1

jqueryとslick.jsを読み込む（footer.php）

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="<?php bloginfo('template_url'); ?>/js/slick/slick.min.js"></script>

ページへのスライダー記述

<div class="slider-group">
  <div class="slider-filter-left"></div>
  <div class="slider-filter-right"></div>
<ul class="slick-box2">
<li class="slide-item"><img class="slick-slide" src="<?php bloginfo('template_url'); ?>/images/sliders/plan1.jpg"></li>
<li class="slide-item"><img class="slick-slide" src="<?php bloginfo('template_url'); ?>/images/sliders/plan2.jpg"></li>
<li class="slide-item"><img class="slick-slide" src="<?php bloginfo('template_url'); ?>/images/sliders/plan3.jpg"></li>
</ul>
</div>

slick.jsのオプション設定
※1枚あたりの画像幅を固定する場合「variableWidth: true,」を入れる
※responsiveの設定で画面が画像幅1080px以下になった時に「variableWidth: false,」で解除させる

$(function() {
	$('.slick-box').slick({
		infinite: true,
		dots: false,
		arrows: true,
		prevArrow: '<button type="button" class="slick-prev">&lt;</button>',
		nextArrow: '<button type="button" class="slick-next">&gt;</button>',
		slidesToShow: 1,
		slidesToScroll: 1,
                variableWidth: true,
                centerMode: true,
//              centerPadding:'100px',
		adaptiveHeight: true,
		autoplay: true,
//		fade: true,
		speed: 1000,
		autoplaySpeed: 10000,
responsive: [{
  breakpoint: 1080,settings: {
    variableWidth: false,
    }
  }]
	});
});

cssの記述
※白背景を透過させて画像の上に乗せる
※width: calcでの幅の設定がポイント

1080pxの画像に対して「width: calc((100vw – 1096px) / 2);」という設定
※違う幅の画像を使用する場合、1096pxの数値を変えて調整する

.slider-group {
  position: relative;
}
.slick-box2 {
  display: flex;
  justify-content: center;
  align-items: center;
}
.slider-list-item {
  text-align: center;
  width: 1080px;
  height: 80px;
  background: #ff0;
}
.slider-filter-right,
.slider-filter-left {
  z-index: 1;
  background: #fff;
  filter: alpha(opacity=80);
  -ms-filter: "alpha(opacity=80)";
  -moz-opacity:0.8;
  -khtml-opacity: 0.8;
  opacity:0.8;
  zoom:1;
  position: absolute;
  top: 0;
  height: 400px;
  width: calc((100vw - 1096px) / 2);
}
.slider-filter-right {
  left: 0;
}
.slider-filter-left {
  right: 0;
}