スマホも対応！スクリーンいっぱいに表示させるスライダーを実装するスクリプト -FullScreen Slider

ページ内のセクションをスクリーンいっぱいに表示し、マウスのクリック・ホイール操作、スマホのタップ・スワイプ操作に対応した快適なスライダーを紹介します。

FullScreen Slider -GitHub

• FullScreen Sliderのデモ
• FullScreen Sliderの使い方

FullScreen Sliderのデモ

デモでは、FullScreen Sliderの快適なスライダーを楽しめます。
下記のgifは、左ナビゲーションでクリック操作をしていますが、マウスのホイール操作にも対応しています。

デモページ

タップ・スワイプなど、スマホのタッチ操作でもスライダーを快適に利用できます。

デモページをスマホで表示

FullScreen Sliderの使い方

Step 1: 外部ファイル

当スタイルシートとスクリプトを外部ファイルとして記述します。

Step 2: HTML

スライドさせるセクションをdiv要素で、下部にナビゲーションを用意します。各スライド内の見出しやテキストにもフェードのCSSアニメーションが適用されています。各スライドの背景色はJavaScriptで制御されています。