Swiperを使ってCOSMAC研究会のトップページの画像をスライド表示にしてみました。
COSMAC研究会のトップページの画像がずっと同じままだったのですが、最近のCOSMAC VIPの画像も一緒に表示したいなということでスライダーを使って画像を表示するようにしてみました。なお、MovableTypeのテーマは「Eiger 1.6」を使用しています。
今回はスライダーはSwiperを使ってみました。GitHubに最新版が登録されていますのでこれを使います。
この手のスライダーアプリはjQueryのようなJavaScriptライブラリが必要な場合が多いのですが、このSwiperは単体で動作するため、既存のMovableTypeの環境にも影響を与えないだろうということで使ってみました。
Swiperのダウンロード
今回はswiper-5.4.1を使用しました。公式サイトからダウンロードしたZIPファイルを展開すると、多数のファイルが含まれていますが、サイトに組み込むのは以下の2つのファイルです。
- swiper-5.4.1/package/css/swiper.min.css
- swiper-5.4.1/package/js/swiper.min.js
Swiperのcssとjsの設置
COSMAC研究会のサイトはMovableTypeを使用していますので、以下のように設置しました。
デザイン→テンプレート→インデックステンプレートで以下の2つのインデックステンプレートを作成します。
- テンプレート名:swiper.min.css
- テンプレートの内容:swiper.min.cssをそのままコピペ
- 出力ファイル名:swiper.min.css
- テンプレートの種類:スタイルシート(styles)
- 公開:スタティック(既定)
- テンプレート名:swiper.min.js
- テンプレートの内容:swiper.min.jsをそのままコピペ
- 出力ファイル名:swiper.min.js
- テンプレートの種類:JavaScript(javascript)
- 公開:スタティック(既定)
これで保存と再構築を行えば、swiperのcssとjsが設置されます。
インデックスページ(index.html)の修正
(1) インデックスページにSwiperのファイルを組み込みます。</head>の直前にswiper.min.cssを配置します。
<link rel="stylesheet" href="swiper.min.css">
</head>
(2) 最初に組み込まれている「メインイメージ」のモジュールを「メインスライド」に書き換えます。この「メインスライド」モジュールは後で登録します。
(変更前)
</header>
<mt:Include module="メインイメージ">
<div class="content">
(変更後)
</header>
<mt:Include module="メインスライド">
<div class="content">
(3) </body>の直前に以下の記述を追加します。細かいパラメタの内容は公式サイトでご確認ください。
<script src="swiper.min.js"></script>
<script>
var swiper = new Swiper('.swiper-container', {
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev',
},
loop: true,
autoplay: {
delay: 3000,
disableOnInteraction: true
},
pagination: {
el: '.swiper-pagination',
type: 'bullets',
clickable: true,
}
});
</script>
スタイルシート(style.css)の設定
既存のスタイルシート(style.css)にSwiperの表示領域の大きさを示すクラス属性を追加します。私の場合は以下を追加しました。
.swiper-container { width: 600px; height: 300px; }
メインスライドモジュールの作成
デザイン→テンプレート→テンプレートモジュールで、新規モジュールを作成します。
- テンプレート名:メインスライド
- モジュール本体:
<div id="mainimage">
<!-- Slider main container -->
<div class="swiper-container">
<!-- Additional required wrapper -->
<div class="swiper-wrapper">
<!-- Slides -->
<div class="swiper-slide">
<mt:Assets type="image" tag="@SITE_SLIDE_IMAGE1" limit="1">
<img src="<$mt:AssetThumbnailURL encode_html="1">">
</mt:Assets>
</div>
<div class="swiper-slide">
<mt:Assets type="image" tag="@SITE_SLIDE_IMAGE2" limit="1">
<img src="<$mt:AssetThumbnailURL encode_html="1">">
</mt:Assets>
</div>
<div class="swiper-slide">
<mt:Assets type="image" tag="@SITE_SLIDE_IMAGE3" limit="1">
<img src="<$mt:AssetThumbnailURL encode_html="1">">
</mt:Assets>
</div>
<div class="swiper-slide">
<mt:Assets type="image" tag="@SITE_SLIDE_IMAGE4" limit="1">
<img src="<$mt:AssetThumbnailURL encode_html="1">">
</mt:Assets>
</div>
</div>
<!-- If we need pagination -->
<div class="swiper-pagination"></div>
<!-- If we need navigation buttons -->
<div class="swiper-button-prev"></div>
<div class="swiper-button-next"></div>
<!-- If we need scrollbar -->
<div class="swiper-scrollbar"></div>
</div>
</div>
スライド表示する画像の指定
スライダーで表示したいアセット画像に@SITE_SLIDE_IMAGE1~4のタグをつけると、その画像がスライダーで表示されます。
動作確認
組み込んだサイトにアクセスして表示を確認します。
終わりに
MovableTypeは初心者なので、もっと良い組み込みかたがあると思いますが、一応これで動きましたという記録になります。