まじめに仕事をすると、ブログのネタが増える、下駄です。
今対応している案件で、とある会社から、LP(LandingPage)を作って欲しいという依頼があったんですが、
全部で５回のアップデートがあり、それぞれの詳細日程は直前まで不明、内容などについても、直前にならないとわからないという内容で、「簡単なwebコーディング」ということだけで、５人日程度で引き受けた内容だったのですが、蓋を開けてみると、「重工なアニメーション」やら、「トップバナースライダー」というような、まあまあ工数を使うプログラミングも入ってきていたので、追加費用項目が膨らむ予感がしています。
今回は、スライダーライブラリなどを使わなくても、独自で書いたナンチャッテ・スライダーが、今後もまあまあ使えそうだったので、それをまとめておきたいと思います。
簡単にスライダー構築
レスポンシブ対応のjQueryスライダー系ライブラリ × 11選 スマートフォンの登場で、カルーセル機能が必須になってきましたが、そうしらスライダーライブラリを評価してくれているブログサイトなどもあり、手軽に構築できる状況ですが、 どのライブラリもクセがあり、多少の難もあるようです。 僕も、個人的に使うカルーセルライブラリは、以前に作ってgithubにもアップしています。 [Tools] 高速カルーセル・ライブラリをバージョンアップしました どうやら、css3には強力な機能が備わっていて、もっと簡単に構築できるようなので、今回はその機能を使ってネイティブコードで簡単にスライダーを構築してみます。scroll-snap-typeについて
その機能が「scroll-snap-type」です。 この機能は、スクロールが発生するエリアで、そのエリアサイズにピタっと合わせてくれる機能で、カルーセル機能そのまんまというぐらい、ドンピシャの機能になります。 ちなみに、スマホ表示した画面は、ページ全体が縦スクロールすると思いますが、センテンス毎に縦スクロールもピタッと画面に合わせてセンテンストップを持ってくることもできるようです。 これは覚えておくとかなりUIに役立つ機能になりそうですね。ソース
<div class="slider">
<div class="content-1"></div>
<div class="content-2"></div>
<div class="content-3"></div>
</div>
.content-1{background-color:red;}
.content-2{background-color:blue;}
.content-3{background-color:green;}
.slider{
width:300px;
}
.slider > *{
display:inline-block;
width:100%;
height:200px;
}
/* Snap */
.slider{
white-space:nowrap;
overflow:auto;
scroll-snap-type: x mandatory;
}
.slider > *{
scroll-snap-align: start;
}
/* Scrollbar-hidden */
.slider{
-ms-overflow-style: none;
scrollbar-width: none;
}
.slider::-webkit-scrollbar{
display:none;
}
See the Pen own-slider by YugetaKoji (@geta1972) on CodePen.
簡単な構図ですが、非常にシンプルにカルーセル処理ができていることがわかります。解説
PCで見た時に、overflowのscroll表示を無くすために、cssの「Scrollbar-hidden」をいう機能を追加していますが、これは、このスライダー処理以外の場所でも使えるので、表示をなくしたい場合に使い回せるので、覚えておいたほうがいい機能です。 ブラウザの種類によって、書き方が違うので、まとめてみました。 今回はカルーセルで横スクロールで使ったので、"scroll-snap-type: x mandatory;"としましたが、縦スクロールで使いたい場合は、"scroll-snap-type: y mandatory;"です。 リファレンスサイトを見ておくと、色々な使い方が思いつくかもしれません。 https://developer.mozilla.org/ja/docs/Web/CSS/scroll-snap-type ちなみに、スライダー内のコンテンツがサイズ100%でなかった場合、横スクロールでは、コンテンツの左端がフィットするように動作します。 センタリングするやり方が今の段階で見つけられなかったので、柔軟なカルーセル構築できるように、もう少し調べてみたいと思います。対応ブラウザ調査
とりあえず、最新ブラウザであれば、動作するようですね。
やはり要注意は古いIEですね。
