slick.jsで左右の画像を少しだけ見せるスライダーを作る方法

今回はslick.jsを使って左右の画像を少しだけ見える状態のスライダーを作る方法を紹介します。

必要なものはslick.jsだけです。

 

slick.jsを使った左右の画像が少し見えるスライダー

コードは以下のようになります。

<link rel="stylesheet" type="text/css" href="slick.css">
<link rel="stylesheet" type="text/css" href="slick-theme.css">
<script type="text/javascript" src="jquery.min.js"  ></script>
<script type="text/javascript" src="slick.min.js"></script>
 
<script>
$("document").ready(function(){
  $('.mypattern').slick({
    autoplay: true,
    autoplaySpeed: 2500,
    speed: 800,
    dots: true,
    arrows: false,
    centerMode: true,
    centerPadding: '10%'
  });
}); 
</script>
 
<style>
  * {
    margin: 0;
    padding: 0;
  }
  .slider {
    width: 90%;
    margin: 0 auto 80px;
  }
  .slick-slide img {
    width: 100%;
    height: auto;
  }
  .mypattern{
    width: 100%;
  }
  .mypattern .slick-slide{
    margin: 5px;
  }
</style>
 
<div class="content">
  <div class="slider mypattern">
    <div><a href="#"><img src="画像URL"></a></div>
    <div><a href="#"><img src="画像URL"></a></div>
    <div><a href="#"><img src="画像URL"></a></div>
    <div><a href="#"><img src="画像URL"></a></div>
    <div><a href="#"><img src="画像URL"></a></div>
    <div><a href="#"><img src="画像URL"></a></div>
    <div><a href="#"><img src="画像URL"></a></div>
  </div>
</div>

 

最初の4行で必要なファイルは全て読み込んでしまいます。

次にslick.jsに関する設定を行なっています。自動スライド、スライド秒数、ナビゲーションなどを設定しています。

左右に前後の画像を少し見えるようにする方法は簡単で、オプションの記述に以下を加えるだけです。

centerMode: true,
centerPadding: ‘10%’

 

centerModeは中央寄せ、centerPaddingで左右の画像との余白を指定することができます。

これを指定しておくと左右にどんな画像があるかわかりやすくなっていいと思います。スライダーの下にナビゲーションも置いておくとよりわかりやすいでしょう。

また、centerPaddingの値を大きくすると左右の画像がより見えるようになります。その分スライダー自体が小さくなります。

 

中央の画像だけ目立たせる

スライダーの中心はやはり中央の画像だと思うので、CSSで左右の見切れている画像を調整することもできます。

左右の画像のスタイルは以下のように指定します。

.mypattern .slick-slide:not(.slick-center) {
左右のセンター以外の箇所に指定したい内容を記述
}

 

いくつか例をあげてみます。

例えばCSSで左右の画像を白黒にして中央の画像だけそのままの状態にしたい場合はgrayscaleを指定して左右を白黒にします。

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

 

CSSで左右の画像を透過したい場合はopacityを指定して透過させます。

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

 

左右の画像をぼかしたいときはblurでぼかしましょう。

.mypattern .slick-slide:not(.slick-center) {
-webkit-filter: blur(5px);
-moz-filter:blur(5px);
-o-filter: blur(5px);
-ms-filter: blur(5px);
filter: blur(5px);
transition: 0.2s linear;
}

 

左右の画像を小さくして中央の画像が目立つようにしてみます。

.mypattern .slick-slide:not(.slick-center) {
-webkit-transform: scale(0.8);
-moz-transform: scale(0.8);
-ms-transform: scale(0.8);
-o-transform: scale(0.8);
transform: scale(0.8);
}

 

こんな感じで中央の画像だけを目立たせることができます。

中央の画像を目立たせるスタイルは他にも色々あると思うので、オリジナルを作ってみても面白いかもしれません。