jQueryでヘッダー背景画像をスライドショー化

jQueryを使ってスライドショーが出来るようなので、ヘッダーのJumbotron背景画像をスライドショー化してみた。
プラグインは下記の制作元サイトでダウンロード可能。
指定した背景画像をx秒毎に切り替えるjQueryプラグイン - Rewish

プラグインをどう使えばいいのか分からなかったが、下記記事を参考にさせて頂いた。
背景画像をスライドショーのように切り替えるjQueryプラグイン『BgSwitcher』 | PCとサイト制作の小技備忘録

jQuery自体は、今使っているBootstrap準拠のテーマに既にバージョン2.0.3が入っていたので省略。

プラグイン制作元から背景画像をスライドショー化するjquery.bgswitcher.jsをダウンロードし、これをhexo/themes/freewill/source/jsの中に配置。

hexo/themes/freewill/layout/_partial/head.ejsファイルの<script src="<%- config.root %>js/jquery-2.0.3.min.js"></script>のすぐ下に下記を追加。

1
2
3
4
5
6
7
8
9
10
11
12

<script type="text/javascript" src="/js/jquery.bgswitcher.js"></script>
<script type="text/javascript">
jQuery(function($) {
    $('.bgsw').bgSwitcher({
        images: ['/images/pier-440339_1280r.jpg', '/images/a0960_005150_r.jpg', '/images/cornflower-816963_640.jpg', '/images/lavender-836563_640.jpg'],
        interval: 6000,
        shuffle: "true",
        effect: "fade",
        duration: 1500
    });
});
</script>

intervalは6000（ミリ秒？）にした。

hexo/themes/freewill/layout/index.ejsファイルでjumbotronを指定しているclassにbgswも加える。

1

<div class="jumbotron page-header bg-primary bgsw">

hexo serverしてプレビューしてみると、スライドショーになってる。

すごい。
effectもfade、blind、clipなど色々あって面白い。

様々なオプションについてはプラグイン制作元サイトで解説されている。