2017
08/21

slick.jsを使って横幅いっぱい+前後の要素が半透明のスライドを実装する

slick.jsを使って横幅いっぱい+前後の画像を半透明にしたスライドを実装しようとしたのですが、きれいに動作させようとすると結構手間がかかってしまいました。

slick.js本体の修正やコールバック関数を使うことでいい感じに実装できましたのでよかったら参考にしてみてください。

ADs

その1:横幅いっぱいにする

slick.jsは子要素を横並びにし、親要素をoverflow:hiddenにして要素の幅ずつ移動させることでアニメーションを実装しています。

簡略化すると、以下のようなHTMLになっています。

この「slick-list」がoverflow:hiddenなので、これをvisibleにすれば横幅いっぱいにできそうです。
それだけだと横スクロールが出てしまいますので、スライドの親要素をoverflow:hiddenにします。

うまくいってそうですが、一周したあとの1枚目と2枚目、逆方向(右側)へ動いたときの4枚目と3枚目が途切れてしまいます。

うまくいってない例その1

slick.jsでは無限ループを実現するために前後に要素を複製して挿入しているのですが、この要素が1枚ずつしかないことが原因です。
開発者ツールで見ると分かりやすいですが、「slick-cloned」というクラスが複製された要素です。

複製する要素を1枚多くすればこの問題は解決します。
コールバックやCSSでは解消できなかったので、slick.js本体を編集します。

これで途切れることのない無限ループするスライドが実装できました。

うまくいった例その1

前後の画像を半透明にしてみる

次に、前後の要素を半透明にしてみましょう。
アクティブな要素には「slick-current」と「slick-active」というクラスが付加されますので、以下のCSSを書けばそれでよさそうです。

しかし実際に見てみると、最後から1枚目、1枚目から最後へ動いたときにtransitionが効いていません。

うまくいってない例その2

これは複製された要素に対して「slick-current」と「slick-active」クラスが付加されないことが原因です。
あとaddClass/removeClassのタイミングもちょっとおかしいような?

そこで複製された要素へもクラスを付加しつつ、いい感じのタイミングでクラスの付け外しを行う処理を自力で書きます。

※「slick-now」というクラスをアクティブなスライドに追加する場合の例です

slick.js本体ではなく、設置時のコールバックで対応します。

これで完璧だ!

レスポンシブの場合

レスポンシブにする場合、固定幅を解除しつつスライド要素が幅100%で収まるように調整すれば横幅いっぱいのスライドになります。

レスポンシブ対応

解消しきれていない問題

アクティブな要素+その要素が複製された要素をカレントとして扱っているため、すごく横長なモニターや縮小されて表示されると半透明でない要素が2枚できています…。
スライドの枚数を多めにするか、極端な環境は見ないことにしましょう…。

横幅いっぱい+前後半透明のカルーセル、というのはよく見かける動きですが、slick.jsを使うとちょっとめんどくさいですね…。ほかにおすすめのプラグインがあれば教えてください_(._.)_

ちなみに

以前の記事でslick.jsと同じぐらい有名でよく使われているbxSliderを使った場合のカスタマイズを紹介しています。
bxSlider派の方は参考にしてみてください。

bxSliderのよく使っているカスタマイズ5選

ADs

Post Comments

メールアドレスが公開されることはありません。

Comments

こんにちは。
前後の画像を透過するコードを参考にさせていただきました。

ただ問題が起きまして、画像を増やした際に、途中で両側の透過が適用されなくなるタイミングがあります…
jsがさっぱりでどこの記述が影響しているのか分からず…
ご教授いただけますと助かります。

  • モイヒー
  • 2020年8月9日 9:57 PM