【CSS,JavaScript】コピペで簡単 シンプルなスライドショー(bxslider)

man

困ってる人

トップ画面でスライドショーを表示する方法が分からない
インターネットで検索してみても、やり方がいろいろと多過ぎてどれがいいのかいまいち
どうにか簡単に出来る方法はないかなぁ?

それでは、本日はとてもシンプルなスライドショーを表示する方法をご案内しますね

operator

オペレーター

こんにちは、よろと申します。

今回は、出来るだけシンプルで簡単、コピペでOK、jQueryプラグイン「bxslider」を使ってトップページにスライドショーを表示する方法のご紹介。

【CSS, JavaScript】コピペで簡単 シンプルなスライドショー(bxslider)

スライドショーを表示する方法というのは、インターネット上に様々な「jQueryプラグイン」があったりもするのですが、

今回は「bxslider」というものを使った方法で、画像のフェードイン、フェードアウトでのシンプルな方法をご紹介


順序としては、

  • 「bxslider」をダウンロードし、中のファイル「jquery.bxslider.js」と「jquery.bxslider.css」を保存
  • HTMLに画像を表示する記述(コピペでOK)
  • CSSで見た目を整える(これもコピペでOK)
  • bxslider」はこちらから。


    「jquery.bxslider.js」は、普段自分がJavaScriptを読み込む時のフォルダ内に保存。

    「jquery.bxslider.css」をCSSフォルダに、もしくは中のコードをコピーして使ってもOK。

    上のCSSファイルを読み込む時は、

    でファイルを読み込むのを忘れずに。

    HTML部分

    CSS部分:ここで表示方法やサイズの設定をする

    JavaScript

    これで終わり。

    そうすると、画像が画面上いっぱいに広がって勝手にフェードイン、フェードアウトをしてくれるはず。

    注意点としては、jQueryを読み込む時はきちんと、

    こういったものを書くのを忘れずに。

    プログラミングが難しい, 挫折した, 勉強法が分からないという人におすすめのプログラミングスクール