SAMPLE IMAGE この画像は差し替えてご利用ください

bxSlider(スライドショー)

bxSlider の実装(その1) - テキストのスライド

jQuery のプラグイン bxSlider を実装します。

➊ bxSlider ライブラリにアクセスする

① 以下のサイトにアクセスする

jdgJQP_01:bxSlider(2019/09/16)
jdgJQP_01:bxSlider(2019/09/16)

② [Click here to install] をクリックする。

 

➋ それぞれのコードをコピーし、貼り付ける

① Install ページが開く。The Easy WayThe Other Ways とがあるが、ここでは The Easy Way をとる。 

jdgJQ0_02:bxSlider Install(2019/09/16)
jdgJQ0_02:bxSlider Install(2019/09/16)

② The Easy Way 傘下にあるコードをそれぞれ以下に貼り付けた。

Head 要素:jQuery プラグイン bxSlider を読み込む

<link rel="stylesheet" href="https://cdn.jsdelivr.net/bxslider/4.2.12/jquery.bxslider.css">

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>

<script src="https://cdn.jsdelivr.net/bxslider/4.2.12/jquery.bxslider.min.js"></script>

jQuery コード:bxSlider を初期化し開始する JavaScript コード

<script>

$(document).ready(function(){

$('.slider01').bxSlider();

    });

</script>

対象要素名は、以下の HTML コード指定される class 名と同じ名前にする。

(ここでは、クラス名は "slider01"。これを '.slider01' と表示する。)

HTML コード:body タグ内

<div class="slider01">

<div>I am a slide.</div>

<div>I am another slide.</div>

</div>

➌ bxSlider を実装してみる

Jimdo で作成したサイトに上記コードを実装してみる。プレビューにて確認する。

I am a slide.
I am another slide.

bxSlider の実装(その2) - 画像のスライド

➊ bxSlider ライブラリにアクセスする

➋ それぞれのコードをコピーして貼り付ける

The Easy Way 傘下のコードを利用する。

 

① jQuery と bxSlider プラグインのコードを読み込む

head 要素に記述する jQuery プラグイン bxSlider を読み込むコードは全く同じもの。すでに head 要素内に記述されていれば追記する必要は無い。

Head 要素:jQuery プラグイン bxSlider を読み込む

<link rel="stylesheet" href="https://cdn.jsdelivr.net/bxslider/4.2.12/jquery.bxslider.css">

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>

<script src="https://cdn.jsdelivr.net/bxslider/4.2.12/jquery.bxslider.min.js"></script>

② JavaScript コード

「管理メニュー」>「基本設定」>「ヘッダー編集」>「ホームページ全体」と進み、次の JavaScript コードを、head 要素内の、「jQuery プラグイン bxSlider を読み込む」の後に追加する。

jQuery コード:bxSlider を初期化し開始する JavaScript コード

<script>

$(document).ready(function(){

$('.slider02').bxSlider({

auto: true,

mode: 'fade',

captions: true,

slideWidth: 600

    });

});

</script>

  • スライダーのクラス名は自由に設定できるが、ここでは「.slider02」としている。
  • オプションを追加する。

 

③ コンテンツを表示する箇所で HTML コード

bxSlider を実装するページの箇所で、「+コンテンツを追加」から「ウィジェット/HTML」を選択し、以下のコードを貼り付ける。 

HTML コード:body タグ内

<div class="slider02">

<div><img src="01.jpg" title="Funky roots"></div>

<div><img src="02.jpg" title="The long and winding road"></div>

<div><img src="03.jpg" title="Happy trees"></div>

</div>

  • スライダーのクラス名は、ここでは "slider02" としている
  • 表示する画像ファイル 01.jpg、02.jpg、03.jpg は別途アップロードする(次のステップ)
  • title に入力した文字列はキャプションとして表示される。

➌ 使用する画像をアップロードし、HTMLコードと結びつける

① 画像ファイルをアップロードし、画像ファイルの url をコピーする

1)「管理メニュー」>「デザイン」>「独自レイアウト」>「ファイル」

2)「ファイルを選択」し、「アップロード」する

3)アップロードした画像ファイルをクリックすると新しいタブで表示されるので、その時の url をコピーする。あるいは画像アイルを右クリックして表示されるメニュー「リンクのアドレスをコピー」をクリックしても、同じ内容が同じくクリップボードに保存される

(Windows 10 v1803 以降のクリップボードでは、複数のコピーを保存できるので、ここでは使用するスライダーに使用する画像全部の url を全てコピーしておく)

② HTML コードの img タグの src に、コピーした url を貼り付ける

1)挿入した「ウィジェット/HTML」を開く

2)<div><img src="01.jpg" … の 01.jpg 部分を選択する

3)クリップボードから、該当のコピーデータを貼り付ける

4)これにより <img src="https://…01.jpg…/"、となる

5)全ての画像をひもづけ終わったら「保存」をクリックする

HTML コード:img タグの src の値を変更する

<div class="slider02">

<div><img src="01.jpg" title="Funky roots"></div>

<div><img src="02.jpg" title="The long and winding road"></div>

<div><img src="03.jpg" title="Happy trees"></div>

</div>

❹ 実装した bxSlider を確認する

プレビュー・モードにして確認します。