スライダー機能を使ったJavaScriptライブラリ

最近、少しデザイン寄りの対応が多いのですが、今回はJavaScriptのコーディングの修正をやる事になりそうです。

その経緯・背景

　今やってる知人の会社のホームページを作成させてもらっているのですが、「トップページに沢山の写真を見せる様にしたい」という要望が出てきました。元々そのホームページの要件というのは特に無かったので、私の方で「こうしましょう！」という提案して、トップページから問い合わせページまでデザイン、コーディングし、ホームページをデプロイしました。
　その時のトップページは会社の雰囲気を伝えるため、単一の写真と事業内容だけ表示する静的なページだったのですが、今後は「トップページに複数枚の写真を表示させる様にしたい」という要望が出てきました。少し話を聞いてみると今後は同業他社の売り込みをもっとしていきたいとの事で、事業内容を詳しくホームページ上で行う必要があるとの事でした。その説明する為に写真を沢山見せたいとの事でした。

その話を受けて、ホームページのデザインを考えたのですが、トップページなので、あまり長くスクロールさせる事はしたくないと思い、今回はスライド方式で実装する事にしました。

実装方法

いくつか実装方法はあるかと思うのですが、今回はSwiper.jsを採用する事にしました。既にjQueryを使っているでスライダープラグイン「Slick」を候補として考えていたのですが、Breakpointを簡単に設定できるオプションがある事と、今まで使った事があるSwiper.jsが良いと判断しました。前回使ったのは古いバージョンのものなので、今後新しいバージョンのものを採用する予定です。

実装

以前も他のサイトを参考にしながら構築しました。なので、今回もこちらを参考に実装する予定です。

【最新】Swiperの使い方・カスタマイズを解説！サンプルやオプション15個付き ー基礎から応用までー | 東京のホームページ制作 / WEB制作会社 BRISK

Webサイトのコーディングをするなら必修とも言えるスライダー。 スライダー実装用のJSプラグインはいろいろあり

b-risk.jp