PAS-POLサイトの背景画像をスライドショーにしました。jQuery.BGSwitcherの使い方。プログラミング独学の軌跡プログラミング独学の軌跡ド素人がプログラミングを独学していく記録です。未解決テックアカデミーが初心者向け副業コースを始めました。テックアカデミーで無料メンター相談ができる。CSS初心者が稼ぐならココナラがおすすめ。クラウドワークスは難しい。PAS-POLサイトの背景画像をスライドショーにしました。jQuery.BGSwitcherの使い方。2020.08.10先日模写したのPAS-POLサイトですが、メインビジュアルの背景画像をまだスライドショーにしてなかったのでスライドショーにしました。ここのスライドショーは背景画像がふわっと切り替わるやつなのですが、「どうやるのかな~?」と調べたところ、「jQuery.BGSwitcher」というプラグインが良さげだとわかり、それを使う事にしました。ちなみに、前回使ったjQueryスライダー系プラグイン「slick」にロゴや文字をpositionで配置して、slickを無理やり背景画像スライダーのようにする手もありましたが、なんかスマートじゃないのでやめました。背景画像がふわっと切り替わるjQuery.BgSwitcherの使い方。jQuery.BGSwitcherをダウンロード。main.jsファイルにコードを記述。CSSファイルにコードを記述。index.htmlファイルに読み込む。index.htmlにコードを記述。この通りにやっても動かない場合は。背景画像がふわっと切り替わるjQuery.BgSwitcherの使い方。jQuery.BGSwitcherの使い方は色々なサイトに書いてあるのですが、微妙にわかりにくい。私なりに簡単に解説していきたいと思います。jQuery.BGSwitcherをダウンロード。Rewish→「ダウンロード」下の「jquery.bgswitcher.js」を右クリック。(これがまずわかりにくい。私は左クリックしてしまい、その後どうしたらいいのかわからなくなりました。→自分の作っているサイトのフォルダに貼り付けます。main.jsファイルにコードを記述。]内に、表示させたい画像ファイル名を入れます。その下の項目を、コメントを参照に色々いじることでカスタマイズできます。CSSファイルにコードを記述。bold;text-align:center;}widthとheightは○○pxなどと変えられますが、width:100%、height:vhの方がウィンドウいっぱいに背景画像が表示されるのでオススメです。(width:vwというのもありますが、これだとスクロールバー領域のサイズも含まれ環境や状況によって微妙にサイズが変わってきてしまう可能性があるので、width:100%の方がおすすめです。)index.htmlファイルに読み込む。src="https://ajax.googleapis.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script></head>ちなみに私が今まで使っていたjQuery/1.12.4バージョンでも動いたので、バージョンはなんでもいいと思います。src="main.js"></script></body>index.htmlにコードを記述。テスト</h1></div>これで、このdivの間の背景画像がふわっと切り替わるスライドショーになります。この通りにやっても動かない場合は。読み込む際の書き方はjs/jquery.bgswitcher.jsjs/main.jsとなります。あとは、「img」なのを「image」と書いていたり。この辺を確認しましょう。以上、jQuery.BGSwitcherの使い方でした。テックアカデミーが初心者向け副業コースを始めました↓テックアカデミーが初心者向け副業コースを始めました。プログラミングスクール大手「テックアカデミー」が、初心者向け副業コースを始めました。その名も「はじめての副業コース」です。いうのうれしいですよね。どんな内容かわかりやすく解説します。架空のカフェサイトを作りました。クロスフェードスライダー。nth-childやnth-of-typeが効かない!heightをレスポンシブ(高さ可変)にする方法「paddingハック」。コメントをキャンセルメールアドレスが公開されることはありません。※サイト次回のコメントで使用するためブラウザーに自分の名前、メールアドレス、サイトを保存する。jQueryプロフィールプロフィール管理人のハルトです。