プラグイン使用せずに汎用性の高いコンテンツスライダー作成しました[jQuery 編]。

# WEB制作

2020.05.16

みなさま、こんにちは。

先日、プラグインを使用せずにスライダーを作成してほしいという依頼がありましたので、頑張ってみました。

いつもはプラグイン「slick」を使用しているので、簡単にスライダーを実装していたのですが、がっつり組むとなると意外と複雑で、勉強になりました。

プラグインはオプションありきで、カスタマイズ性が低いので、自作するのもいいかもしれません。

自分で仕様がわかっている分、カスタマイズもしやすいので。

プラグイン使わずにスライダーを設計してみた。

それではコードを載せていきますので、参考にしてみてください。

ふわっと、フィードで変化するスライダー

まずはDEMOを参照してみてください。

5秒ごとに変化するので、慌てず見守ってください。

まず基本的なHTML。

ここにCSSで装飾をしていきます。

なにも難しいことはなく、ただ画像を重ねて配置しました。

肝心の動きはすべてjQueryで構築しました。

かみ砕いて説明すると、

① ですべての画像を隠し、1枚目の画像を表示する。

② でこの仕組みの肝となるページ切り替えの関数を作成しました。
こちらもシンプルで、すべての画像をフィードアウトし、該当する画像をフィードインするといったもの。

③ で発火処理の作成。
ここで条件分岐が発生しました。

表示されているのが最後の画像だった場合

ページを0に戻し、② を実行。
つまり、最初のページをフィードイン。

表示されているのが最後のページ以外の場合

ページに1を足し、② を実行。
つまり次の画像をフィードイン

④ で実行。

考え方はシンプルですよね。

では次に矢印ボタンを付けた場合を考えてみました。

<prev>、<next>ボタン付きスライダー

まずはDEMOを参照してみてください。

今回は5秒待つ必要ありません。矢印ボタンを押してみてください。

追記箇所だけ書けば事足りるのですが、まるっと書きました。

追記したのは、

ここの部分。

長くなるのと、動きに関係してこないのでCSSは省略しました。

気になる方はデヴェロッパーツールで確認してみてください。

それでは肝心の動きの部分を。

 

矢印部分に関するのは

以降の部分。

 

前へボタンがクリックされた時

まずはイメージの切り替えを停止、開始をする。
これをしないと、残り1秒で2枚目にスライドさせたとき、2枚目が1秒後にスライドしてしまうため、まずはリセットするという意味。

で、また条件分岐。

表示されているのが最初の画像の時は、最後の画像へ。

それ以外はページから1を引いたうえで、ページ切り替えの関数を実行。

次へボタンがクリックされたときはその逆の処理を実行する。

ドットナビゲーションを付けたスライダー

まずはDEMOを参照してみてください。

スライダーの下にある●〇〇〇がドットナビゲーション。

これがあれば何枚目のスライダーであと何枚スライドがあるのかわかるので便利ですよね。

今回は追記した部分だけを。

特に難しいところはないですね。

CSSも同じくごく平凡なので省略をし、肝心の部分に。

 

① でまずは最初のドットにクラスを付与しました。
CSSでクラスが付与されているドットの色を変更する必要があります。

そのままページ切り替え時のドットバージョン関数を作成してください。

ページ切り替えが起きた時、ドットからクラスを取り、該当のドットにクラスを付与するという関数。

② クリック時にドットが何番目か取得する。

クリックされたドットの順番が画像のスライドの順番と一致した場合は何もしない。

不一致の場合はドットの順番を代入し、処理をすることで、ふたつを連動させる。

―――――――――

上記のように基本コードを作成すればカスタマイズは簡単ですので、ぜひ試してみてください

例えば、横スライドするスライダー とか。

※chromeの現時点での最新バージョンしか動作確認していませんので、注意してください。

webサイトの制作、お任せください。

あくまでも基本料金になりますので、まずはご連絡ください。

コーディング

トップページ
(ヘッダー・フッター含む)

¥8,000~

コンテンツページ(1P)
(ヘッダー・フッター含まない)

¥4,000~

ランディングページ

¥15,000~

※アニメーションはオプション料金

デザイン

トップページ
(ヘッダー・フッター含む)

¥20,000~

コンテンツページ(1P)
(ヘッダー・フッター含まない)

¥5,000~

ランディングページ

¥20,000~

※コーディングとのセット料金

サイト構築

10ページ
(お問合せページを含まない)

¥100,000~

20ページ
(お問合せページを含まない)

¥175,000~

Wordpress導入

(上記)+¥50,000~

※お問合せページは¥10,000~