【slick】スライダーの左右に薄い黒背景を入れる方法

slickスライダーを使った見せ方について紹介していきたいと思います。

標準でも十分使えますがslickはオプションとcssと使うことで幅広いスライダーの見せ方をすることができます。

今回のやりたいことは下記になります。

• 画像を中央に配置して左右をちょっと見せる
• 左右の画像を透過または薄い背景を載せる

slickスライダーで画像を中央に配置して左右をちょっと見せる方法

html

まずhtml側のスライダーにする画像をhtmlを使って記述します。

<ul id="slider">
	<li><a href="#"><img src="img/slider01.jpg" alt=""></a></li>
	<li><a href="#"><img src="img/slider02.jpg" alt=""></a></li>
        <li><a href="#"><img src="img/slider03.jpg" alt=""></a></li>
	<li><a href="#"><img src="img/slider04.jpg" alt=""></a></li>
</ul>

js

jQuery('#slider').slick({
	infinite: true,
	speed: 500,
	easing: 'ease',
	centerMode: true,
	variableWidth: true
});

slickだと画像を中央に寄せる「centerMode」というものがあります。

他のスライダーのプラグインだとcssなどを使って中央寄せにする方法がありますがslickであればオプション指定だけで簡単に再現することができます。

左右をちょっと画像に薄い背景を配置する

slickスライダーは表示されているものにクラス（slick-current）をつけてくれます。

こちらを利用することでcssで薄い背景を配置することができます。

css

#slider .slick-list .slick-slide:not(.slick-current):after{
        position: absolute;
        top: 0;
        left: 0;
        content: "";
        width: 100%;
        height: 100%;
        background: #000;
        opacity: 0.5;
        transition: 0.3s ease 0s;
}   

こちらでスライダーの左右の画像に薄い背景を載せることができました。

サンプル

上記だとスライダーが一周したときに黒背景も動いているように見えるので左右の背景が動かないように見せる方法も次に紹介していきます。

左右の黒背景が動かないように見せる方法

js

jQuery(document).ready(function($) {
        /* main slider */
        jQuery('#slider').slick({
                initialSlide: 1,
                dots: true,
                pauseOnHover: true,
                infinite: true,
                speed: 1500,
                easing: 'ease',
                arrows: true,
                autoplay: true,
                slidesToShow: 1,
                centerMode: true,
                variableWidth: true,
                prevArrow: '<a class="slick-prev" href="#"></a>',
                nextArrow: '<a class="slick-next" href="#"></a>'
        });
        //前へ次へをタグで囲む
        jQuery('#slider').prepend('<div class="slide-btn-inner"><div></div></div>');
        jQuery('#slider .slick-next').prependTo('.slide-btn-inner > div');
        jQuery('#slider .slick-prev').prependTo('.slide-btn-inner > div');                          
});

css

#slider {position: relative;}

#slider .slide-btn-inner {
    position: absolute;
    width: 1200px;
    height: 500px;
    left: 50%;
    top: 0;
    margin: 0 0 0 -600px;
}

#slider .slide-btn-inner > div{
        position: relative;
        width: 1200px;
    height: 500px;
}

#slider .slide-btn-inner > div:before,
#slider .slide-btn-inner > div:after {
    position: absolute;
    content: "";
    width: 1200px;
    height: 500px;
    background: #000;
    opacity: .5;
    z-index: 1;
}

#slider .slide-btn-inner > div:before {left: -1200px;}
#slider .slide-btn-inner > div:after {left: 1200px;}

サンプル