［JS覚書］シンプルで扱いやすいスライダー「Basic jQuery Slider」のカスタマイズ

2012年7月30日2013年5月1日

今回はこれを導入してみました。カスタマイズメモです。

シンプルで使いやすいベーシックなスライドショーを実装できるjQueryプラグイン「Basic jQuery Slider」 | bl6.jp

ファイル構成

index.html
［images］
banner01.jpg
banner02.jpg
banner03.jpg
banner04.jpg
banner05.jpg
［css］
basic_jquery_slider.css
［js］
basic_jquery_slider.js
　　　［libs］
　　　jquery-1.6.2.min.js

パスさえ間違ってなければ、ファイル位置やファイル名称は変えちゃっても問題無さそうです。
jquery-1.6.2.min.jsは、もちろん他の部分で既に導入されていれば必要ない場合もあります。
2012年10月現在のバージョンはファイル名が「basic_jquery_slider」から「bjc」に変更になってます（＾＾；

ヘッダー部のスクリプトソース

どうやらCSSでなく、高さと幅とスライダー（アニメーション）の仕様はこちらで左右されているようです。
なのでこちらの設定を変えないといけません。
アニメーションは「fade」か「slide」のどちらかを指定します。

<link rel="stylesheet" href="/css/basic-jquery-slider.css">
<script src="/js/libs/jquery-1.6.2.min.js"></script>
<script src="/js/basic-jquery-slider.js"></script>   
<script>
    $(document).ready(function() {
        $('#banner').bjqs({
            'animation' : 'slide',
            'width' : 700,
            'height' : 300
        });
    });
</script>

おまけでWordpressでvicunaテンプレートに組み込んだときの記述です。
最近はめっきりこっちにしちゃってます。

<link rel="stylesheet" href="<?php bloginfo('template_url'); ?>/style-vega/basic-jquery-slider.css">
<script src="<?php bloginfo('template_url'); ?>/style-vega/js/libs/jquery-1.6.2.min.js"></script>
<script src="<?php bloginfo('template_url'); ?>/style-vega/js/basic-jquery-slider.js"></script>   
<script>
    $(document).ready(function() {
        $('#banner').bjqs({
            'animation' : 'slide',
            'width' : 925,
            'height' : 400
        });
    });
</script>

スライダー部のソース

<!--start dynamic_sidebar header -->
<div id="banner">
<ul class="bjqs">
<li><img src="/images/banner01.jpg" title="image1"></li>
<li><img src="/images/banner02.jpg" title="image2"></li>
<li><img src="/images/banner03.jpg" title="image3"></li>
<li><img src="/images/banner04.jpg" title="image4"></li>
<li><img src="/images/banner05.jpg" title="image5"></li>
・・・
</ul>
</div>
</div>
<!--end dynamic_sidebar header -->

おまけでこちらもWordpressでvicunaテンプレートに組み込んだときの記述です。

<!--start dynamic_sidebar header -->
<div id="header_bar">
<div id="banner">
<ul class="bjqs">
<li><img src="<?php bloginfo('template_url'); ?>/style-vega/images/slider/topimg01.jpg" title="image1"></li>
<li><img src="<?php bloginfo('template_url'); ?>/style-vega/images/slider/topimg02.jpg" title="image2"></li>
<li><img src="<?php bloginfo('template_url'); ?>/style-vega/images/slider/topimg03.jpg" title="image3"></li>
</ul>
</div>
</div>
<!--end dynamic_sidebar header -->

basic_jquery_slider.cssのカスタマイズ

上記のスタイルが「basic_jquery_slider.css」で制御されてます。
以下の#bodyと#containerのスタイルは、ベースのスタイルに影響をおよぼすので先にとっちゃいました。スライド部分のスタイルには影響ないようです。

body{
  background:#f5f5f5;
  font-family: 'Carter One', sans-serif;
}

#container{
  width:980px;
  padding:100px 0;
  margin:0 auto;
  overflow:hidden;
}

キャプションの削除

下部真ん中に出るtitleタグの表記がいらない場合。display:noneにしてます。

p.bjqs-caption{display:block;width:96%;margin:0;padding:2%;position:absolute;bottom:0;}

p.bjqs-caption{display:none;width:96%;margin:0;padding:2%;position:absolute;bottom:0;}

マーカーの移動とカスタマイズ

まず画像通りに大きさを設定するのを忘れない。

#banner {
	height:360px;
	width:540px;
}

マーカーの位置は、CSSのこの行のtopの数値で制御しますが、

ol.bjqs-markers{list-style:none;margin:0;padding:0;z-index:9999;top:385px;}

画像の大きさにも寄りますが、
マーカーを画像の中に入れるなら、高さ-15
マーカーを画像の下に出すなら高さ＋5
あたりが適当かと。上は高さが400で中に入れた場合です。

デフォルト色の赤から色を変更しています。

ol.bjqs-markers li.active-marker a{
	background:#fd0100;
}

↓　↓　↓

ol.bjqs-markers li.active-marker a{
	background:#66b967;
}

スライド画像の上にマーカーを乗せる場合は、ボーダーがない方が見栄えがいいような。ボーダーをとると少し間が狭くなるので、調整してもいいかもしれません。

ol.bjqs-markers li a{
	display:block;
	height:10px;
	width:10px;
	border:4px solid #fff;
	overflow:hidden;
	text-indent:-9999px;
	background:#000;
	border-radius:10px;
	box-shadow:0 0 50px rgba(0,0,0,0.5);
}

↓　↓　↓

ol.bjqs-markers li a{
	display:block;
	height:10px;
	width:10px;
	border:none;
	overflow:hidden;
	text-indent:-9999px;
	background:#000;
	border-radius:10px;
	box-shadow:0 0 50px rgba(0,0,0,0.5);
}

シャドウを消す

デフォルトだとIEではシャドウなしで、chrome、firefoxだとスライダーとマーカーの後ろにうっすら広いシャドウがある感じです。
各々のbox-shadowの設定をとってしまえばOK

#banner {
	height:360px;
	width:540px;
	position:relative;
	background:#fff;
	box-shadow:0 0 50px rgba(0,0,0,0.5);
	margin-top: 0;
	margin-right: auto;
	margin-bottom: 0;
	margin-left: auto;
}

ol.bjqs-markers li a{
display:block;
height:10px;
width:10px;
border:none;
overflow:hidden;
text-indent:-9999px;
background:#000;
border-radius:10px;
box-shadow:0 0 50px rgba(0,0,0,0.5);
}

両端の「PREV」「NEXT」リンクを、「<」「>」に変更。

これは、CSSでなくbasic-jquery-slider.js内の以下を変更

// Text to display in next/prev buttons
                nextText: 'NEXT',
                prevText: 'PREV',



// Text to display in next/prev buttons
                nextText: '>',
                prevText: '<',
&#91;/javascript&#93;




<h3>両端のPREV・NEXTリンクを、ロールオーバーする画像ボタンにしてみる</h3>

basic-jquery-slider.jsで設定されているスタイル
[javascript]
$next = $('<li><a href="#" class="bjqs-next" class="controls">' + settings.nextText + '</a></li>'),
                $previous = $('<li><a href="#" class="bjqs-prev" class="controls">' + settings.prevText + '</a></li>');

以下の名称の25×25の画像を用意します。
prevは「＜」のような左向き矢印、nextは「＞」のような右向き矢印で、onが付いてるものは、ロールオーバーした時の画像です。
自分は通常時の矢印を透明度を高く、on時を透明度を薄くしました。

sqa-prev.png
sqa-next.png
sqa-prev_on.png
sqa-next_on.png

a.bjqs-prev{	
  left:0;
}

a.bjqs-next{
  right:0;
}

ul.bjqs-controls li a{
	display:block;
	padding:5px 10px;
	position:absolute;
	background:#fff;
	color:#66b967;
	text-decoration:none;
	text-transform:uppercase;
}

↓　↓　↓

ul.bjqs-controls li a{
	display:block;
	width:25px;
	height:25px;
	padding:0px;
	position:absolute;
	color:#66b967;
	text-indent:-9999px;
	text-decoration:none;
	text-transform:uppercase;
}

a.bjqs-prev{
	background-image:url(/images/sqa-prev.png);
	background-repeat:no-repeat;
	left:0;
}

a:hover.bjqs-prev{
	background-image:url(/images/sqa-prev_on.png);
	background-repeat:no-repeat;
	left:0;
}

a.bjqs-next{
	background-image:url(/images/sqa-next.png);
	background-repeat:no-repeat;	
	right:0;
}

a:hover.bjqs-next{
	background-image:url(/images/sqa-next_on.png);
	background-repeat:no-repeat;	
	right:0;
}

20121030_2回目カスタマイズ時に編集済