Bloosh Company

記事のサムネイル画像です。

2020年10月2日

Development>WordPress

IEでもWordPressでもjQuery不要のスライダーSiemaを自動再生する方法!

, , ,

JavaScriptのプラグインSiema。
スライダーを簡単に設置できます。(カルーセルとも言う。)
ここでいうプラグインとは、WordPressのプラグインではありません。

このプラグインと違いまっせ。
しかしながら、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>
IEでもWordPressでもjQuery不要のスライダーSiemaを自動再生する方法! | ブルーシュカンパニー

前の記事>>

スマホ画面になったらボタンになって開閉するメニュー