【コピペOK】カルーセルプラグインslickで左右の画像をちょっとだけ見せる方法

こんにちはアカリです。

今回は、slickを少しカスタマイズして左右をちょっとだけ見せるようにしてかっこよくする方法をご紹介します。

slickのサイトで見てもイマイチわからなかったって人も、コピペするだけでOKなのでぜひ使ってください。

出来上がりはこんな感じになります。

同じ画像３枚並べただけなので、少し見づらいかもですが・・・

CSSの設定で左右の画像を半透明っぽくすることもできます。

では、さっそく説明していきます。

スポンサードサーチ

slickを使って左右をチラ見せする方法

まずは、slickのサイトでslickをダウンロードします。（CDNもありますが今回はダウンロード版で）

サイトの上にget it now!とあるので、そこをクリックします。

その後、Downroad Nowをクリックでダウンロードを開始します。

ダウンロードしましたら、ZIPファイルの中にslickフォルダーがあるので、

そのまま自身のJSフォルダーなどに格納しましょう。

フォルダーが準備できたらHTMLに以下のコードを記述してslickの導入をします。

<link rel="stylesheet" type="text/css" href="js/slick/slick.css">
    <link rel="stylesheet" type="text/css" href="js/slick/slick-theme.css">
<script type="text/javascript" src="js/slick/slick.min.js"></script>

上のコードをhead内などで、読み込んでください。

次にHTMLです。

HTML

<div class="slider mypattern">
                    <div><img src="images/image1.jpg" alt=""></div>
                    <div><img src="images/image2.jpg" alt=""></div>
                    <div><img src="images/image3.jpg" alt=""></div>
                    <div><img src="images/image4.png" alt=""></div>

                </div>

imageに好きな画像を入れてください。

続いてCSSです。

スポンサードサーチ

CSS

.slider {
    width: 70%;
    margin: 0 auto 80px;
}

.slick-slide img {
    width: 100%;
    height: auto;
}

.mypattern {
    width: 70%;
}

.mypattern .slick-slide {
    margin: 10px;
}

/*slick setting*/

.mypattern .slick-slide:not(.slick-center) {
    -webkit-filter: opacity(70%);
    -moz-filter: opacity(70%);
    -o-filter: opacity(70%);
    -ms-filter: opacity(70%);
    filter: opacity(70%);
    transition: 0.2s linear;
}

/*slick setting*/

.slick-prev:before,
.slick-next:before {
    color: #000;
}

CSSですが、.mypattern .slick-slide{margin:で画像と画像の間の幅を調整できます。

この辺りはお好みでカスタマイズしてみてください。

１つ目は左右のチラ見せ部分の画像を半透明にしてくれます。

あと、/slick setting/はおまけなのですが、

２つ目は、左右のボタンの色を変えることができます。

デフォルトは確か白なので、

背景が白系で見えにくい場合は好きな色に設定して使ってみてください。

続いて、JSですね。

JavaScript

$(document).ready(function() {
  $('.mypattern').slick({
    autoplay: true,
    autoplaySpeed: 2500,
    speed: 800,
    dots: true,
    arrows: true,
    centerMode: true,
    centerPadding: '20%',
    

  });
});

centerPaddingの値を変えることでチラ見せの幅を広くしたり狭くしたりできます。私は２０％にしました。

各オプションは以下の通りです。

オプション	説明
autoplay	自動再生の有効化 [default:false]
autoplaySpeed	自動再生のスピード（ミリ秒単位） default:3000
speed	スライド/フェードアニメーションの速度 [default:300]
dots	ドットナビを表示する [default:false]
arrows	前/次の矢印の生成の有効化 [default:true]
centerMode	slidesToShowが奇数の時、現在のスライドを中央に表示するか [default:false]
centerPadding	centerMode:trueの時、左右のスライドを見せる幅(px or %) [default:50px]