必要な３つの作業

スライドショーを作成するには次の３つの作業を行います。

1. HTMLでスライドショーの構成を記述する
2. jQueryとslickでスライドショーとして動作させる
3. スタイルシートで幅などのスタイルを指定する

２−１．HTMLでスライドショーの構成を記述する

まずは、 スライドショーの枠組みをHTMLで作成 します。とても簡単に記述できます。

基本的には、次のような構成になります。

<div id="slideshow">
	<div><img src="スライド画像のURL"></div>
	<div><img src="スライド画像のURL"></div>
	<div><img src="スライド画像のURL"></div>
	<div><img src="スライド画像のURL"></div>
	<div><img src="スライド画像のURL"></div>
</div> 
 

各スライドをラッパーで囲んでいるだけ です。ラッパーにはjQueryなどから識別するための IDやクラス名 をつけておきます。

ポイントは、 <ul>や<ol>などのリストではなく、汎用タグの<div>を使用している ところです。

slickでは、スライドショーを作成するときに、ラッパーと各スライドの間に、div要素が２つ追加される仕様になっています。

なので例えば<ul>タグで記述すると、次のような形になってしまいます。

<ul>
	<div>
		<div>
			<li>スライド１</li>
			<li>スライド２</li>
			<li>スライド３</li>
		</div>
	</div>
</ul>

HTML5では、<ul>や<ol>の子要素に<div>は認められていない ようです。 こちらのサイト でHTML5の親要素と子要素の対応関係が調べられます。

なので、 リストではなく汎用タグで記述する といいと思います。

２−２．jQueryとslickでスライドショーとして動作させる

HTMLで記述した要素をスライドショーに変身させるには、そのためのスクリプトを記述します。

最低限スライドショーとして動作させるためには、次のように記述します。

$(document).ready(function(){
	$('#slideshow').slick();
});

「#slideshow」は、先ほど作成したHTMLに記述したラッパー要素のIDを示しています。クラス名をつけた場合は、そのクラス名を指定してください。

slickでは、 デフォルトで「前のスライドボタン」や「次のスライドボタン」が表示される ようになっています。見えない場合は、スタイルシートで調整すると見えたりするので後で説明します。

この設定では、自動でスライドを切り替えたり、ドットで表示されるスライドナビゲーション（ページングのように、表示したいスライドに対応したドットをクリックして切り替える）の表示はしません。

自動でスライドを切り替えたり、ドットナビを表示する には次のように記述します。

$(document).ready(function(){
	$('#slideshow').slick({
		autoplay: true,
		dots: true
	});
});

「autoplay」オプションに「true」を指定すると、スライドが自動で切り替わります。

「dots」オプションに「true」を指定すると、ドットナビが表示されます。

また、デフォルトでは横にスライドして切り替わりますが、 じわっとフェードして切り替わるようにする には、次のように記述します。

$(document).ready(function(){
	$('#slideshow').slick({
		autoplay: true,
		dots: true,
		fade: true
	});
});

「fade」オプションを追加しています。「true」を指定するとフェードして切り替わります。

上記のスクリプトを参考にするか、そのままコピペして、 javascriptファイルを作成 してください。拡張子は「.js」で保存します。HTMLに直接記述する方法もあります。

作成したjavascriptファイルをファンブログにアップして、外部ファイルとして読み込む とスライドショーとして動作すると思います。

アップして読み込む手順は、 こちらの記事 で説明しているので、参考にしてみてください。

２−３．スタイルシートで幅などのスタイルを指定する

HTMLを記述して、JavaScriptでスライドショーとして動作させれば、最低限のスライドショーは完成しています。

ただ、表示に少し問題があるかもしれません。

「前のスライドボタン」や「次のスライドボタン」が見えていなかったり、ドットナビの表示位置がおかしかったりすることがあります。

このようなときは、 スタイルシートで正しく表示されるように調整 します。

「前のスライドボタン」や「次のスライドボタン」が見えない場合は、スライドショーの幅が表示領域いっぱいになっていて、 ナビボタンがその外側に表示されていて見えない ことがあります。

このような場合は、ラッパー要素の幅を調整することで表示できます。

#slideshow {
	width: 94%;
}

また、 デフォルトでナビボタンの前景色が白なので、ページの背景が白いと見えない です。

次のように指定するとナビの色を変えられます。

#slideshow .slick-prev:before,
#slideshow .slick-next:before {
	color: lightgray;
}

「.slick-prev」や「.slick-next」の「before疑似要素」に「←」や「→」の文字が指定されていて、slickが独自のフォントを使って、その文字の見た目をボタンのように変えています。色は背景ではなく文字についています。

なので、 「before疑似要素」の背景色ではなく前景色を変えてあげることで、ナビボタンの色を変えられます 。スタイルシートでは「color」プロパティです。

また、ドットナビの表示位置がおかしいことがありますが、これは、ドットナビは「ul」要素で記述される仕様になっているのですが、ページのスタイルで「ul」要素の位置やマージンなどを指定していると表示がおかしくなったりすることがあるようです。

なので、表示がおかしい場合は、 スライドショー内の「ul」要素や「li」要素のスタイル指定を確認 してみるといいと思います。