Concrete CMS(concrete5)

Sliderproを使った画像スライダーブロックのカスタムテンプレート


イメージスライダーでおなじみのSlider Pro(Github)のexample2が好きなので、
カスタムテンプレートを作りたいな~と思って作ったメモ。

デモ

SLIDER PRO EXAMPLE2 DEMO
(※私の趣味のサイトです^^;)

ダウンロード

slider-pro-example2
英語が残念ですみません・・・。
なんとなくわかればいいかなって…へへ…。

あとgithubがわからない。ファイルはzip形式でアップしています。


画像スライダーブロックにカスタムテンプレートをあててください。

簡単な解説

画像スライダーブロックのオプションを、Slider Proのオプションに近づけたいなと思って弄くりました。

1)$navigationType・・・arrows/buttons
矢印、ドット(ページャー)、両方、なしの設定がifで回されてます。
caseの方が適切だったかもしれません。view.phpのコアファイルがifだったのでそのまま利用させていただきました。

2)$timeout・・・autoplayDelay
画像スライダーの表示時間です。

3)$speed・・・fadeDuration
画像スライダーのフェードの時間です。(ここは他のオプションだったかもしれない…)

4)$noAnimate・・・autoplay
スライドを自動再生するかどうか。
チェックをいれるとしない設定(autoplay:false)になります。

5)$pause・・・autoplayOnHover
マウスが重なったときにスライドをとめるかどうか。
チェックを入れると停止(autoplayOnHover:stop)になります。

6)$maxWidth・・・ style="width: $maxWidth px"
囲ってるdiv要素に最大横幅を設定できます。
ただしもともとcontainerとかで横幅を指定している場合はその横幅内でスライドします。

その他

画像の縦横サイズの初期値は以下になっています。
width: 300, height: 300,

すべてカスタムテンプレートのview.phpファイル内に記述があるのでそちらをご確認ください。

ライセンス

配布先にならってます。

応用すれば他のデザインでも使えそうですね。
そのうち(または要望とかあれば)作るかも?
予定は未定。

  • この記事を書いた人

ゆず

■忘れないように自分の覚書と、誰かも困っているかもしれないので参考になればいいなくらいの軽い備忘録です。
■サイト運営費のためGoogleAdsenseをいれています。
giftee / ko-fi / mail

-Concrete CMS(concrete5)
-,