IT坊やだからさ。

ウェブディレクター/プログララマーの現役フリーランスが送るガンダム話

プログラミング

【jQuery】Javascriptで横スクロールのスライドショー!

投稿日:

【jQuery】Javascriptで横スクロールのスライドショー!

今回はJavascriptを使ったプログラミング作品の一例。

よくある横スクロール型のスライドショーをウェブサイトに組み込んでみる。

横スクロールはJavascriptの定番機能だが基礎的な作り方が学べて良い。

Javascriptをこれから学習する人にオススメの機能である。

作り方はたくさんあるが今回は「.html」「.css」「.js」の3つのファイルから作成することにする。

【jQuery】必要なjavascriptファイルをインポート

実はjavascriptで横スクロール式のスライドショーは数多くのやり方がありライブラリが確立している。

必要なライブラリが分かれば誰でも作成する事ができるのだ。

では何が必要なのか。

今回これらのJavascriptファイルをインポートした。

  • jquery-3.3.1.min.js(版数は最新版で)
  • bootstrap.min.js
  • docs.min.js
  • jssor.slider.min.js

まずは天下の「jQuery」ファイルから。

javascriptライブラリの代表格。

数字は版数なので最新版をダウンロードすれば良い。

ダウンロード先はこちらから。

link Downloading jQuery

jQueryのライブラリは必須でインポートしておこう。

次に「bootstrap」ファイルについて。

まず「bootstrap」とは?

BootstrapはWebサイトやWebアプリケーションを作成するフリーソフトウェアツール集である。BootstrapはWebサイトやWebアプリケーションを作成するフリーソフトウェアツール集である。 タイポグラフィ、フォーム、ボタン、ナビゲーション、その他構成要素やJavaScript用拡張などがHTML及びCSSベースのデザインテンプレートとして用意されている。

「bootstrap」は再現性の高いウェブパーツやレイアウトの整理に使うコードが書かれているファイル。

今回の様に横スクロールなど再現性の高い動きにも対応したデザインコードが含まれている。

「docs」も汎用性の高いウェブパーツになる。

「bootstrap」と親和性が高い。

最後の「jssor.slider」ファイルが横スクロールの本体と言えるファイル。

スライドショー周りはこのファイルに託そう。

その他にも手組みのjavascriptファイルが存在するがそれは次の項目で。

「.js」「.html」「.css」ファイルで構成

次に横スクロールのスライドショーを構成するファイル群の詳細を書いていく。

まずは顔となる「.html」から。

htmlファイルに必要なファイルをリンクさせ、スライドショーをデザインしていく。

「head」タグ内に必要なjavascriptファイルおよび「.css」ファイルをリンクさせる。

「body」タグでは以下の設定を行う。

まずは横スクロールさせる部分の設定をする。

「class=”container”」が外枠になる。

詳細なデザインは「.css」ファイルで取り決めるので「.html」ファイルでは配置だけをデザインする。

動きは「id=”slider1_container”」で設定する。

スクリプトで設定した「class」と「id」を「.html」ファイルに埋め込んでいく形だ。

では「.css」ファイルの設定をする。

「.css」ファイルの設定はそこまでない。

必要なのはスライドショーで扱うイメージファイルの取り決め。

そしてナビゲーションとなる「→」の配置設定だけだ。

最後に手組みのjavascriptファイルを追加する。

作成したファイルは「slidesw.js」とした。

(名前は任意だが、htmlファイルへリンクする名前を一致させる事)

javascriptファイルの役割は3つある。

上から順番に言えば「スライドショーの時間設定」「ナビゲーションの動き」そして「スライドショーの動き」だ。

変更できる点は「$Idle」でインターバルを。

「$SlideDuration」でスライドの速さ。

変更する点は時間の設定ぐらい。

これで一通り横スクロールのスライドショーの完成。

最近はフロントエンジニアとウェブデザイナーの見境がなくなってきたが、その要因の1つにjavascriptが確実に該当する。

コーディングが難しいなんて言ってられないんだよ。

必要なjavascriptはどんどんインポートしてしまうべし。

今日も良い1日を。

      

-プログラミング

執筆者:

関連記事

【CSS/Javascript】ナビゲーションバーをトップに固定!

【CSS/Javascript】ナビゲーションバーをトップに固定!

ナビゲーションバーをウェブサイトのトップに固定する手順。 ひと昔であればjQueryなど使って対応していたが、今はCSSだけでも十分に対応できる時代になった。 今回はJavascriptの知識もかねて …

VBA開発でよくあるエラーまとめ!エラー出現ランキング!

【解決策あり】VBAのエラーまとめ!エラーランキング5!

仕事でVBA案件をもらうことがある。 わたしは元々VBAが最も得意だった。 VBAとはマクロの事だ。 プログラミング言語の中ではシンプルな言語でわかりやすい。 今回、数多くのVBA案件をこなしていく中 …

ITエンジニアになるならHTMLから始める事をオススメ!

ITエンジニアになるならHTMLから始める事をオススメ!

わたしは現在ITエンジニアとしてフリーランスをやらせてもらっている。 最初からフリーランスエンジニアを目指して活動をしていたわけでないが、自然と始めたことがある。 それがウェブ系のプログラミング言語H …

【簡単】Javascriptを使ってサクッとQRコードを発行する!

【簡単】Javascriptを使ってサクッとQRコードを作成!

今回は思いっきりプログラミングのことについて書こう。 と言っても内容は至って簡単なコードだけだ。 実現したのは「Javascript」を使って「QRコード」を発行するというシステムだ。 先日、あるクラ …

【Javascript】デジタル時計とアナログ時計の作り方!

【Javascript】デジタル時計とアナログ時計の作り方!

今回はJavascriptで時計を作ってみた。 Javascriptは動的なオープンソースプログラミング言語で汎用性が高い。 ウェブ屋としてはHTMLと親和性も高いことから必然的に習得した技術の賜物で …

プロフィール

逆襲のジェリド

逆襲のジェリドは史実を覆すべく、復活を遂げた。時代はプログラミングを求める!俺を戦いに駆り立てたのは貴様だ!そんなこと言えるのかよ!

現役ITエンジニアフリーランス。得意分野はphp、Java、Javascript、VB.net、VBA。仕事についてはDMで。このブログではウェブかプログラミング、ガンダムについて徒然なるままに。

詳しくはこちら→ 詳細プロフィール