記事の詳細

こんにちは。今回は「bxSliderの実装方法」について紹介します。
皆さんは、画像が自動でスライドするなど動きのあるWebサイトを見たことはありますか。

例えば、通販サイトでは、特集やセール開催を告知するうえで目立つよう取り入れていると思います。
本日紹介するbxSliderは先述の動きをするプラグイン※の中でも使いやすいものとなります。

※プラグイン:ソフトウェアに機能を追加する小さなプログラムのこと。

はじめに

webサイトを制作する手順に則って、事前にフォルダ、ファイルを準備編にて用意していきます。
今回の記事はローカル環境による説明となります。サーバーをお持ちでない方は、下記の記事を参考のうえ制作を進めてくださいね!

XAMPPで仮想環境を構築してwordpressをインストールする方法
はじめまして、網干と申します。本日は表題の通り、XAMPPで仮想環境を構築してwordpressをインストールする方法を掲載します。※本記事ではセキュリティの設定を考慮して...

bxSlider準備編―必要な環境を整えましょう!※ローカル環境の場合を想定

①デスクトップなどに任意の名称で1つフォルダを作り(以降sampleとします)、さらにその中に「css」「js」「img」の名称で各フォルダを作成。


②任意のテキストエディタを使い、「index.html」「style.css」「reset.css」の名称で各ファイルを作成。cssファイルはcssフォルダに移動。(今回はstyle.cssは必須ではありません。)

③reset.cssには、下記の基本コードをコピー&ペースト。

④index.htmlには、下記の基本コードをコピー&ペースト。

⑤style.cssには、下記の基本コードをコピー&ペースト。

⑥最後に、imgフォルダに3枚の画像を用意し、各々「sample_01」「sample_02」「sample_03」の名称で保存。(今回は1280×700の画像を使用)

これで準備完了です!

bxSlider実装編ー動かしていきましょう!

https://bxslider.com/にアクセスし、「Click here to install」をクリック。


②The Other Waysの「1.Download jquery.bxslider.zip here」から必要データをダウンロード。


③ダウンロード後、右クリックですべて展開。(2018/10/04時点でファイル名は「bxslider-4-4.2.12」)
④「src」>「css」の順で進み、「jquery.bxslider.css」を準備編のsample内、cssフォルダにコピー&ペースト。

⑤再度、https://bxslider.com/にアクセスし、「index.html」にThe Easy Wayのコード①②をコピー&ペースト。挿入後は画像2枚目のようになります。

⑥最後に2つの記述を追加します。まず下記★のコードを<link rel=”stylesheet” href=”css/style.css”>の後ろに、また下記◆のコードを$(‘.slider’).bxSlider({ });の中に挿入。

★bxSliderの既存デザインを読み込む記述

◆自動でスライド、スピードを2秒にする記述

すべて挿入したhtmlの完成版は下記となります。

⑦こちらは余談ですが、「jquery.bxslider.css」ファイルの「.bx-wrapper img」の項目に下記を上書きすると、画像が全画面表示されます。

完成!!下記は画像となります。

以上です。
スライドする画像を複数表示させる方法など、その他のオプションについては次回以降のブログで解説していきます。途中にも出てきていたThe Other Waysの実装方法もありますので、ぜひ挑戦してみてくださいね!

 

この記事であなたの課題を解決することができましたか?

疑問点があったり、解決できなかったことがありましたら、お気軽にご相談してください。

The following two tabs change content below.
小林紗絵

小林紗絵

Web制作担当をしています。Adobeソフトを使用したデザインやコーディングを中心にサイト制作に携わっております。今後はWordpressのテーマ作成やマーケティングなど少しずつできることを増やしていきたいと思います!

ほかの投稿も読んでみませんか?

  1. この記事へのコメントはありません。

  1. この記事へのトラックバックはありません。

AD

ページ上部へ戻る