こんにちは、プログラマーの山本です。
今回はオリジナルのスライドショーを制作しました。
・左右に画像送りボタン
・下部に画像位置を示す黒丸
・◯秒おきに自動で画像をスライドさせる
といった機能を搭載したスライドショーになります。
コードを全て公開するので、一部を調整することで、
好きなスライドショーを設置する事ができるでしょう。
・WordPress似プラグインを入れたくない人、
・すでにあるプラグインに好みのものがない人、
・HTMLとCSSで制作されたサイトにスライドショーを導入したい人
などは今回のシステムを導入してみてください。
今回のシステムのデモはこちらです。
※ スライドショーのデモに使用している画像はテスト用で仮置きしたものです。
HTMLでオリジナルスライドショーの土台を作る
2行目と8行目：左右に設置する、画像送り用のボタンになります。
左右の矢印のような画像のURLを入力してください。
4~6行目：スライドショーで表示する画像のURLと、画像をクリックしたときに飛ぶ先のURLを指定してください。
CSSでオリジナルサイドバーのデザインを整える
11行目と17行目：今回は３枚の画像を表示させるので、横幅をこのように設定しています。
使用する画像の枚数に応じて、この値は変更してください。
JavaScriptでオリジナルサイドバーの動作を書く
このままWordPressの固定ページなどに貼り付けても動くようにコードを調整しました。
（&& などの一部記号が文字化けするため、それを回避した書き方にしております。）
3行目：ページを自動送りする間隔の秒数を指定してください。ここでは７秒にしています。
また、上記のコードは、スライドショーに使われている画像の枚数を取得するようにしているので、
画像の枚数に関わらず正常に動作します。
画像の枚数が増えてもコードを修正する必要はありません。
まとめ
今回は、1からオリジナルのサイドバーを作成しました。
コードを全て自作しているので、
自分の好きなようにカスタマイズすることが出来ます。
サイト上にスライドショーを設置したいという方は、
上記のコードを自由に編集してお使いください。
制作の依頼はこちら
もし、ご自分で実装するのが難しい場合や、
カスタマイズが思うように出来ない場合は、
また、今回のシステム以外にも、
Welcartにおけるシステムの追加やカスタマイズ、
Wordpressのテーマやプラグインのカスタマイズなど、
ウェブに関するご依頼ならほとんど対応可能です。
簡単なシステムなら１件¥3,000（税別）から承っております。
相場よりも費用を抑えて対応させていただくことが可能ですので、
以下のフォームから相談内容を記入して気軽にご連絡ください。
原則2営業日以内に、ご返信させていただきます。