ループスライダー-Volar2

ループスライダー-Volar2

SIRIUS2テンプレート【Volar2】では常時ループする画像スライダー機能をご用意してます。
 

アイキャッチ画像

【Volar2】では常にループし続けるスライダー機能を搭載してます。

 

キャプチャ画像

1カラム(ワイド)での利用を想定してデザインしてます。

実際の表示(デモ)は施設のご案内(【Volar2】)でご覧になれます。

目次

概要

<ループスライダー>の主な特長としては、

  • 常にループし続ける。
  • スクリプト不要でスタイルシートのみの軽量化を実現。
  • 設定はすべてモジュール上で完了。
  • 画像幅はPC表示時のみ変更可能。(モジュール上で変更可)
  • 画像下に説明文や画像全体にリンク付けも可。
  • ループスピードは”一応”固定。(スタイルシート上で変更は可)

使い方

<ループスライダー>を設置したい箇所に以下のモジュールを挿入します。

[% module(【Volar2】ループスライダー(HTML)) %]

 

モジュールを開くと下のように画像挿入用のコードが5つ用意されてます。

あとは『(※画像を挿入)』のところをSIRIUS2の画像挿入機能で画像パスに差し替えるだけで完了です。

説明文が必要なら『(説明文をここに記載可能)』のところを好きなテキストで差し替えます。

不必要なら『(説明文をここに記載可能)』を削除します。

<div class="xxx">(※画像を挿入)(説明文をここに記載可能)</div>

デフォルトで5つの画像挿入用コードを用意してますが、速度一定で常にループしているのであまり数が多いとじっくり見てはくれないと思います。

 

それでももしも数を増やしたい場合は先のコードを丸ごとコピーしてすぐ後ろにペーストすれば数は増やせます。

 

反対に減らしたい場合は減らしたいコードを丸ごと削除するか、前後をコメントアウトすれば一時的に非表示にもできます。