スライドショーをUIkitで実装した際、固定の高さではなく、画像の高さに応じて変わるようにする方法を発見したので、ご紹介いたします。

高さ固定のスライドショー（デフォルト）

デフォルトは、どんなサイズの画像が入っても、同じ高さでスライドされる仕様になっています。

縦長の画像が来ると、下の方が切れてしまっています。

高さ可変にする方法

高さが可変にならないのは、UIkitnのデフォルトで設定されているCSSが原因です。CSSで元のスタイルを打ち消してあげると高さ固定を解除できます。

以下は、UIkitのスライドショーにデフォルトで指定されているCSSになります。

.uk-slideshow-items>*{
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  overflow: hidden;
  will-change: transform,opacity;
}

スライドショーのul（.uk-slideshow-items）の直下にある全ての子要素にposition: absolute;とoverflow:hidden;が指定されています。

これによって、親要素ul（.uk-slideshow-items）のサイズをはみ出た部分は全て非表示になるため、画像の高さが変わってもスライドショーの高さが変わらないように見えています。

アスタリスクで指定されているスタイルを書き変えてあげると、高さ可変のスライドショーにすることができます。

以下をCSSに追記し、positionの絶対位置指定を解除して、overflow:hidden;が効かないようにします。

>* {
  position: static;
}

これだけでは、スライドする際に画像の位置が上下にずれていることで段差ができているので、滑らかにスライドするようにしていきます。

ul（.uk-slideshow-items）にはdisplay:grid;を指定します。1枚ずつスライドさせたいので、grid-template-rows: 1fr; grid-template-columns: 1fr;も追記しましょう。

スライドして横並びになるタイミングで、画像の位置がずれて段差ができているので、liにグリッドの行と列の開始・終了位置を指定します。

.uk-slideshow-items {
  display: grid;
  grid-template-rows: 1fr;
  grid-template-columns: 1fr;
　　　
  li {
    grid-row: 1/2;
    grid-column: 1/2;
  }
}

滑らかにスライドする高さ可変式スライドショーができました！

まとめ

UIkitを使って、高さ可変のスライドショーをつくる方法をご紹介しました。

デフォルトのスタイルをきちんと理解すれば、色々なカスタマイズができるので、ぜひ使ってみてください。

CSS / UIkit