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

      2019/06/11


イメージスライダーでおなじみのSlider Proの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ファイル内に記述があるのでそちらをご確認ください。

ライセンス

配布先にならってます。

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

0

 - concrete5 ,