手軽にカルーセルを実装できるjQueryプラグイン「slick」には、現在表示されているスライド(表示の仕方やオプションの指定によって付与の対象となる位置は変わります)に対して.slick-current
というclassが付与される作りになっており、これを利用することでCSSを少し追記するだけでもいろいろな見せ方が可能です。
そこで今回は手軽にできて且つ個人的にも利用することが多い実装サンプルを幾つかご紹介します。
slickの基本的な使い方や実装方法については下記でもサイトやGitHubで確認できるので省略します。
中央のスライド以外を透過させる
slickで用意されているcenterModeを利用している想定で、中央のスライドは通常の見栄えで表示させ、それ以外(このサンプルの場合は左右のスライド)のものは少し透過されるというものです。
まず、HTMLとjQueryはそれぞれ下記のようにシンプルな記述を使用し、jQueryは必須オプションとしてcenterMode
を指定しておきます。
<div id="slick">
<div><img src="img01.jpg"></div>
<div><img src="img02.jpg"></div>
<div><img src="img03.jpg"></div>
・
・
・
</div>
$(function() {
$('#slick').slick({
centerMode: true
});
});
上記で実装したものに対してCSSを下記のように指定することで、中央のスライド以外を透過させる動きを実装できます。
.slick-slide {
transition: .3s ease;
}
.slick-slide:not(.slick-current) {
opacity: .5;
}
.slick-slide
というclassはslickで各スライド要素に対して付与されるclassで、このclassにopacity
を指定することで要素を透過させるのですが、そこに:not()
を使って中央に表示されているスライドに付与されているclassである.slick-current
には適用されない形にします。
実際の見栄えについては以下デモで確認できます。
中央のスライドを大きく #1
中央のスライドを他のものより大きく見せるというものですが、正確には中央以外のスライドを小さくすることにより中央が大きく見えるようにしています。
HTMLとjQueryは「中央のスライド以外を透過させる」と同じものを使用するので省略し、CSSを下記のように指定します。
.slick-slide {
transition: .3s ease;
transform: scale(.85);
}
.slick-current {
transform: scale(1);
}
まず、.slick-slide
に対してtransform: scale(.85);
を指定することで通常のスライドを小さく表示させ、その後中央に表示されるスライドに付与される.slick-current
にはtransform: scale(1);
で縮小を解除するスタイルを記述することで、中央のスライドを大きく見せることができます。
中央のスライドを大きくするのだから単純に.slick-current
に対してtransform: scale()
で大きくなるよう指定するだけでいいのではと思う人もいるでしょうし、もちろんそれでも実装はできるのですが、その場合はスライド要素を括っている親要素のスタイル調整(overflow
の解除など)なども必要になってくるので、今回はそういった調整も必要なく手っ取り早くできる方法としてデフォルトサイズを小さくすることで中央を大きく見せる形を紹介しました。
実際の見栄えについては以下デモで確認できます。
中央のスライドを大きく #2
先ほどの方法で中央のスライドを他のものより大きく見せることはできましたが、transform: scale()
を用いたことによりスライドの左右に大きく余白があるような見栄えになります。
デザイン的に余白があっても問題ないならそのままでいいですが、余白が必要ないという場合はtransform-origin
を使ってそれぞれの原点を調整することで余白がない状態で見せることができます。
HTMLとjQueryは「1. 中央のスライド以外を透過させる」と同じものを使用し、CSSを下記のように指定します。
.slick-slide {
transition: .3s ease;
transform: scale(.85);
transform-origin: 100% 50%;
}
.slick-current {
transform: scale(1);
transform-origin: 50% 50%;
}
.slick-current + .slick-slide {
transform-origin: 0 50%;
}
若干無理矢理感ありますが、上の実装イメージで左に見えるスライドの指定として.slick-slide
にtransform-origin: 100% 50%;
を、中央に表示されているスライドの指定として.slick-current
にtransform-origin: 50% 50%;
を、右に見えるスライドの指定として.slick-current + .slick-slideにtransform-origin: 0 50%;
をそれぞれ指定することで、実装イメージのように余白がない状態で中央を大きく見せるスライドを実装できます。
表示される幅が決め打ちとかであればmargin
を使って調整とかでもいいですが、レスポンシブとかリキッドレイアウトで使用する場合はこのようにtransform-origin
を使った方が何かと楽な印象でした。
実際の見栄えについては以下デモで確認できます。
中央のスライドを大きく+α
上で紹介してきた中央のスライドを大きく見せる動きへさらに+αして、より中央のスライドを目立つようにしてみます。
HTMLとjQueryは「1. 中央のスライド以外を透過させる」と同じものを使用するので省略し、CSSは「3. 中央のスライドを大きく #2」をベースにしたような形で下記のように指定します。
.slick-slide {
transition: .3s ease;
transform: scale(.85);
transform-origin: 110% 50%;
filter: blur(7px);
}
.slick-current {
position: relative;
z-index: 2;
transform: scale(1);
transform-origin: 50% 50%;
filter: blur(0);
}
.slick-current + .slick-slide {
transform-origin: -10% 50%;
}
通常のスライドを小さく表示しつつブラー処理(filter: blur()
)をかけ、それらを中央にきた場合に解除してあげることで上のイメージのような見栄えにできます。
単純にfilter: blur()
を追記するのでもそれっぽくはなりますが、それだけだとブラーをかけたスライドの両端の見栄えが個人的に気になったので、それが見えないようにするためにtransform-origin
のX軸の値を少し調整しています。
今回のサンプルはブラーのみですが、例えばfilter: grayscale()
も使って白黒にするとかopacity
使って少し透過させるといったように、少し調整するだけでも様々な見せ方にすることも可能です。
実際の見栄えについては以下デモで確認できます。
キャプション(テキスト)を表示する
左右に見えるスライドでは表示されず、中央にきた場合にキャプション(テキスト)を表示するものです。
まず、HTMLを下記のように記述し、各スライドの要素内には表示したい画像に加え<p class="caption"></p>
で括ったテキストを記述しておきます。
<div id="slick">
<div>
<img src="img01.jpg">
<p class="caption">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
</div>
<div>
<img src="img02.jpg">
<p class="caption">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
</div>
<div>
<img src="img03.jpg">
<p class="caption">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
</div>
・
・
・
</div>
slickでは特に必要な指定はありませんが、上の実装イメージと同じ形にしたい場合はオプションとしてcenterMode
を指定しておきます。
$(function() {
$('#slick').slick({
centerMode: true
});
});
上記で実装したものに対してCSSを下記のように指定します。
.slick-slide {
position: relative;
}
.slick-slide .caption {
position: absolute;
left: 0;
bottom: 0;
z-index: 2;
width: calc(100% - 40px);
padding: 20px;
background: rgba(0, 0, 0, .6);
color: #fff;
font-size: 14px;
opacity: 0;
transition: .3s ease;
}
.slick-current .caption {
opacity: 1;
transition-delay: .5s;
}
必須のスタイルは.slick-slide .caption
に記述しているopacity: 0;
と.slick-current .caption
に記述しているopacity: 1;
で、これでとりあえず通常はキャプションが表示されずにスライドが中央にきたときに表示されるという動きを実装できます。
あとは、それに装飾を加えれば実装イメージのような見栄えになり、さらに今回のサンプルの場合はtransition
を指定してふわっと表示されるようにしています。
また、.slick-current .caption
に対してtransition-delay
を指定することで、スライドが切り替わって少し経ってからキャプションが表示されるようにもしています。
実際の見栄えについては以下デモで確認できます。
フェード切り替え時の動きにひと手間加える
これまでは停止時でもわかりやすいサンプルでしたが、こちらは切り替え時のフェードの動きに手を加えるというものです。
まず、HTMLは特別な記述はせず下記のようなシンプルなものを使用します。
<div id="slick">
<div><img src="img01.jpg"></div>
<div><img src="img02.jpg"></div>
<div><img src="img03.jpg"></div>
・
・
・
</div>
このサンプルはスライド切り替え時にフェードの動きにひと手間加えるものなので、slickの呼び出し時にはオプションとしてfade
を指定します。
また、speed
とcssEase
のオプションを併せて指定し、その際指定する値は後述するCSSと合わせる形にしておきます。
$(function() {
$('#slick').slick({
fade: true,
speed: 800,
cssEase: 'cubic-bezier(.645, .045, .355, 1)'
});
});
CSSは下記のように記述し、その際transition-duration
やtransition-timing-function
の値はslickのオプション(speed
とcssEase
)で指定したものと合わせる形にしておきます。
.slick-slide img {
transform: scale(1.2);
transition: .8s cubic-bezier(.645, .045, .355, 1);
}
.slick-current img {
transform: scale(1);
}
上記をそれぞれ記述して動きを確認すると、単純にフェード指定したときとは違って、切り替わる際にもともと表示されていたイメージが拡大しながらフェードアウトし、次に表示されるイメージが縮小しながらフェードインするような動きになります。
ちなみに、transform: scale()
の値を逆にすることでフェードイン・アウト時のイメージの拡大・縮小を逆にすることができ、さらにイージングやスピードの組み合わせ方次第でもいろいろな見せ方が可能なので、興味ある人はいろいろ試してみてください。
実際の見栄えについては以下デモで確認できます。
今回はslickを例にしましたが、基本的に使用するのはCSSなので同じように現在表示しているスライドにclassを付与するライブラリであれば使いまわすこともできるかと思います。
今回紹介したサンプルをもっとスマートに実装できるとかこれら以外にもこんな見せ方も簡単にできるとかあれば是非教えてください :)