「slick」で画像スライドの上に文字を中央配置する。

スライダーの実装なんかの時にすごく便利な「Slcik」ただ、スライドの画像の上に文字を置こうとした時に公式ではサポートがないということなので、追加cssだけで実現してみたいと思います。

要件:

  • 画像はimgタグで挿入(wordpressでの実装を考えて)。
  • 各スライダーがそれぞれ独立したリンクになっている
  • 文字は縦横中央配置。
  • テキストは一行で収まらない可能性がある。(line-height実装では不可能な場合。)
  • スライダーの枚数に依存しない

プレーンなslickの実装

一般的なslickを利用したスライダーの実装を考えます。

およそこんな感じになるはずです

文字の配置

結論からいうと、文字部分の領域をposition:absolute;でレイヤーを重ね、flexboxを利用した中央配置を行うことでスムーズに実装ができました。

まずはHTML構造をこんな感じに変化させます

次に、このようなCSSを追加します

これでスライダーの上に文字が表示されるはずです。

実機テストをやって一応しっかり動いています。サンプルは暇があればまた…。

Social Share Button