ECサイト TOPページ スラーダー サイズ調整

画像サイズを指定してトリミングをする HTML CSS

UIKITのuk-sliderを使ったTOPページのスライダーでしたが、CSVで登録した画像がサイズがまちまちだとスライダーの上下が変更し、みっともないので修正してほしいと指示がありました。

CSSで指定してみました。

.banner-wrap1 {
width: 56%;
height: 260px;
overflow-: hidden;
}
.banner-wrap2 {
width: 43%;
height: 260px;
overflow-: hidden;
}
.banner-wrap1 img,
.banner-wrap2 img {
width: 100%;
object-fit: cover;
}
@media (max-width: 959px) {
.banner-wrap1,
.banner-wrap2 {
width: 100%;
height: 90px;
}
}

.banner-wrap1 {
width: 56%;
height: 260px;
overflow-: hidden;
}
.banner-wrap2 {
width: 43%;
height: 260px;
overflow-: hidden;
}
.banner-wrap1 img,
.banner-wrap2 img {
width: 100%;
object-fit: cover;
}
@media (max-width: 959px) {
.banner-wrap1,
.banner-wrap2 {
width: 100%;
height: 90px;
}
}

上記でやったのですが安定しなかったので、UIKITのuk-sliderではなく、uk-slideshowに変更して直接HTMLでサイズ指定ができるので差し替えました。

UIKITのuk-sliderではなく、uk-slideshowに変更

• <div class=”uk-position-relative uk-visible-toggle uk-light” tabindex=”-1″ uk-slideshow=”min-height: 最小の好きな高さ; max-height: 最大の好きなたから; animation: push”>
• <ul class=”uk-slideshow-items”>
• <li>
• <img src=”images/photo.jpg” alt=”” uk-cover>
• </li>
• <li>
• <img src=”images/dark.jpg” alt=”” uk-cover>
• </li>
• <li>
• <img src=”images/light.jpg” alt=”” uk-cover>
• </li>
• </ul>
• <a class=”uk-position-center-left uk-position-small uk-hidden-hover” href=”#” uk-slidenav-previous uk-slideshow-item=”previous”></a>
• <a class=”uk-position-center-right uk-position-small uk-hidden-hover” href=”#” uk-slidenav-next uk-slideshow-item=”next”></a>
• </div>

UIKitはAppleが提供してくれているiOSアプリケーションを構築するためのグラフィカルUIフレームワークです。

フレームワークとはアプリ開発の際に土台として使用するソフトウェアで、様々な機能があらかじめ組み込まれています。

自動でレスポンシブも調整してくれるので少ない工数でリッチな仕組みを実現可能にしてくれます。

ただ、レイアウトが限られているので味気ないサイトになるとも言われ、TOPページをUIKITだけで作っていくのはどうかとの課題もあるようです。

https://getuikit.com/

（英語サイトなので日本語翻訳して利用してみてください）

＜新米 アピコ＞