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

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

サイトのキャプチャ

FullScreen Slider -GitHub

FullScreen Sliderのデモ

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

デモのキャプチャ

デモページ

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

サイトのキャプチャ

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

FullScreen Sliderの使い方

Step 1: 外部ファイル

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

Step 2: HTML

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

sponsors

top of page

©2019 coliss