JavaScriptのプラグインSiema。
スライダーを簡単に設置できます。（カルーセルとも言う。）
ここでいうプラグインとは、WordPressのプラグインではありません。
WordPressプラグインのスライダー機能は、管理画面から画像を選んだり、速度を設定できたりするので便利ですが、反面動作が重くなります。SiemaはjQueryも不要なのでとても軽い！
Siemaの公式サイトはこちら。Siema
まずは最新のソースコードをゲットしましょう。
ピンクのボタンをクリック。
Latest Release（最新版）のところのZIPファイルをダウンロードしたら、「すべて展開」。
docs → assets → siema.min.jsをWordPressのテンプレートフォルダにアップロード。
今度はWordPressのテンプレートファイルをいじります。
スライダーを設置したいところ。
<div class="siema">
<a href="<?php echo home_url('/'); ?>">
<img src="<?php echo get_template_directory_uri(); ?>/images/slider1.jpg">
</a>
<a href="<?php echo home_url('/category/blog'); ?>">
<img src="<?php echo get_template_directory_uri(); ?>/images/slider2.jpg">
</a>
<a href="<?php echo home_url('/contact'); ?>">
<img src="<?php echo get_template_directory_uri(); ?>/images/slider3.jpg">
</a>
</div>
<!--Siema読み込み-->
<script src="<?php echo get_template_directory_uri(); ?>/siema.min.js"></script>
<script>
//動作の設定。オプションなど
const mySiema = new Siema({
duration: 800,
loop: true
});
//自動再生
setInterval(function(){
mySiema.next();
}, 3000);
</script>
画像を並べて、siemaを読み込んで、動作の設定をする。簡単～！！
例のとおり、画像を<a>で囲むとそれぞれにリンクを貼ることができます。
スクリプトの最後のほうが、自動ループ再生の設定です。
setInterval(() => mySiema.next(), 3000);
これではIE11でも動かないのです。
アロー関数ってやつがよくないみたい。
ループ再生にするなら、オプションのloop: trueを設定してね。
他のオプションは公式サイトを見てください。
例のように<a>で囲む場合は、display:blockにします。
また、画像の最大サイズを設定しないと拡大されてぼやけちゃうので、忘れずに。
<style type="text/css">
.siema{
width: 100%;
max-width: 1600px;
margin: 0 auto;
}
.siema a{
display: block;
}
</style>
