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;}

サンプル

未経験でも安心!人気のプログラミングスクール

マンツーマン指導だから未経験からプログラミングが学べて高いコーディングスキルが身につく人気のテックキャンプ!

jQuery
スポンサーリンク
blogをフォローする
フロントエンジニア&コーダーのためのマテリアルブログ

コメント

タイトルとURLをコピーしました