bxSlider スライダーで前後の画像を表示＆透明にしたい

Question

お世話になっております。

bxsliderで画像スライダーを作成中です。

https://wood-roots.com/sample/bxslider/#a03
このサイトのように、スライドの両サイドで前後の画像を表示させて
アクティブでない前後の画像は半透明にしたいのですが、
以下のページではどこを追加/修正すれば良いでしょうか？
https://www.rakuten.ne.jp/gold/xxx/_tes/index.html

よろしくお願いします。

Answer

ECマスターズの田中です。

いただいたサイト上部の「共通」の「CSS」、および
「横幅いっぱいで前後が半透明」にて紹介されている
HTML・CSS・JSを、
index.htmlに適用の上、表示をご確認いただきますようお願いします。

それぞれを適用させる具体的な手順ですが、
HTMLを適用させる際は、
index.htmlのスライダー用タグを囲む
 と  を、


	
		

と

		
	


にご変更願います。

各CSS・JSは、外部ファイルとして読み込んでいただいて結構です。

ページ内にすでに記載されている
$('.bxslider').bxSlider
を含むタグ２つは、動作しないように削除をお願いします。

なお、上記変更を加える際は、
万が一異常があった場合にすぐ元に戻せるよう、
別名で保存するなどしてバックアップを取っていただきますよう
お願いします。