jQueryプラグイン

haikでjQueryプラグインを動かしてみました。
まずは、「slider pro」
色んな機能が搭載されたスライダーです。

公式ページのdownloadをクリックして、ダウンロードをします。


ダウンロードしたzipファイルを解凍して、haikがインストールされているフォルダにアップロードします。
upload
こんな感じ。


haikのページ編集で、#htmlを使って以下のようなHTMLを記述します。(先頭のシングルクォーテーションは不要)
'#html{{

ftpでアップロードした、cssとjsファイルを呼び出します。
’<link rel="stylesheet" type="text/css" href="slider-pro-master/dist/css/slider-pro.min.css" media="screen" />
’<link href="http://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet" />
’<script src="slider-pro-master/dist/js/jquery.sliderPro.min.js"></script>

スライドショーを作る画像を並べます。
’<div id="simple" class="slider-pro">
’<div class="sp-slides">
’<div class="sp-slide"><img class="sp-image" src="swfu/d/test1.jpg" alt="" /></div>
’<div class="sp-slide"><img class="sp-image" src="swfu/d/test2.jpg" alt="" /></div>
’<div class="sp-slide"><img class="sp-image" src="swfu/d/test3.jpg" alt="" /></div>
’</div>
’</div>
’<div class="sp-slide"></div>

オプションを指定して、スライドショーを作ります。
’<script>
$( document ).ready(function( $ ) { $('#simple').sliderPro({
width: 600,//横幅
arrows: true,//左右の矢印
buttons: true,//ナビゲーションボタンを出す
slideDistance:0,//スライド同士の距離
visibleSize: '100%',//前後のスライドを表示
forceSize: '60%',//ページ幅いっぱい
});
});
’</script>
}}


こんな感じのスライドショーができました。
簡単です。

オプションはこんな感じ。

width //横幅を設定。初期:500 ...数値や%で設定・%の場合は'100%'といったように''をつける
height //高さを設定。設定の方法はwidthと同じ
responsive //レスポンシブか否か 初期:true ...trueかfalseか (幅と高さを指定していてもレスポンシブになります)
aspectRatio //縦横比の設定 初期:-1 ...-1以外に設定すると高さがアスペクト比を維持するための数値となる
imageScaleMode //画像のスケールモード(background-sizeみたいなもの) 初期:'cover' ...'cover', 'contain', 'exact' and 'none' 
centerImage //画像を中央表示にするか否か 初期:true
autoHeight //スライダーの高さが要素の高さによって調整されるか否か 初期:false
startSlide //スタート時のスライドを設定 初期:0
shuffle //スライドをシャッフルするか否か 初期:false
orientation //スライダーの向きを縦か横か 初期:'horizontal' ...'vertical'
forceSize //スライダーの幅を全幅もしくは、ブラウザ幅に強制することができる 初期:'none' ... 'fullWidth', 'fullHeight' and 'none'
loop //ループさせるか否か 初期:true
slideDistance //スライド間の距離(px) 初期:10
slideAnimationDuration //スライドのアニメーションの時間 初期:700
heightAnimationDuration //高さのアニメーションの時間 初期:700
visibleSize //表示しているスライドの前後のスライドを表示し見えるようにする 初期:'auto' ...%で指定
breakpoints //ブレークポイントの設定 初期:null
fade //フェードを使用するか否か 初期:'false'
fadeOutPreviousSlide //前のスライドがフェードアウトされた時に次のスライドがフェードインする 初期:true
fadeDuration //フェードアニメーションの時間 初期:500
autoplay //自動再生するか否か 初期:true
autoplayDelay //自動再生の遅延/間隔の設定(ミリ秒) 初期:5000
autoplayDirection //自動再生が次のスライド,前のスライドのどちらに進むか設定 初期:'normal' ...'backwards'
autoplayOnHover //スライドにホバーした際のスライダーの設定(一時停止、ストップ,なし) 初期:'pause' ... 'stop','none'
arrows //矢印ボタンの表示 初期:false
fadeArrows //ホバー時に矢印ボタンを表示 初期:true
buttons //スライドのページャの表示 初期:true
keyboard //キーボードでスライドを動かせるようにする 初期:true
keyboardOnlyOnFocus //スライダーにフォーカスがあるときのみ、キーボード入力に応答するか否かの設定 初期:false
touchSwipe //タッチスワイプをするか否か 初期:true
touchSwipeThreshold //タッチスワイプによるスライドが動く最低限の値を設定 初期:50
fadeCaption //キャプションをフェードさせるか否か 初期:true
captionFadeDuration //キャプションのフェードアニメーション時間の設定 初期:500
fullScreen //フルスクリーンボタンの設定 初期:false
fadeFullScreen //ボタンをホバー時に表示されるか否か 初期:true
waitForLayers //レイヤーが消えた後に次のスライドへ行くかどうか 初期:false
autoScaleLayers //レイヤーが自動的にスケールするか否か 初期:true
autoScaleReference //レイヤーを縮小する必要がどのくらいかを決定するために、現在のスライド幅と比較される基準幅を設定する。 初期:-1
smallSize //スライドのサイズがこのサイズ未満の場合、スモール版の画像を使用 初期:480
mediumSize //スライドのサイズがこのサイズ未満の場合、ミディアム版の画像を使用 初期:768
largeSize //スライドのサイズがこのサイズ未満の場合、ラージ版の画像を使用 初期:1024
updateHash //新しいスライドが選択されたときにハッシュが更新されるか否か 初期:false
reachVideoAction //映像の要素があるスライドが選択された時に映像のアクションを設定 初期:'none' ... 'playVideo' and 'none'
leaveVideoAction //映像の要素があるスライドから移動するに映像のアクションを設定 初期:'pauseVideo' ... 'stopVideo', 'pauseVideo', 'removeVideo' and 'none'
playVideoAction //映像の再生開始時にスライダーのアクションを設定 初期:'stopAutoplay' ... 'stopAutoplay' and 'none'
pauseVideoAction //映像が一時停止されたときのスライダーのアクションを設定 初期:'none' ... 'startAutoplay' and 'none'
endVideoAction //映像が終了したときのスライダーのアクションを設定 初期:'none' ... 'startAutoplay', 'nextSlide', 'replayVideo' and 'none'
thumbnailWidth //サムネイルの幅の設定 初期:100
thumbnailHeight //サムネイルの高さの設定 初期:80
thumbnailsPosition //サムネイルの位置の設定 初期:'bottom' ... 'top', 'bottom', 'right' and 'left'
thumbnailPointer //ポインタが選択されたサムネイルの表示 初期:false
thumbnailArrows //サムネイルの矢印が有効になるか否か 初期:false
fadeThumbnailArrows //サムネイルの矢印がフェードインするか否か 初期:true
thumbnailTouchSwipe //サムネイルのタッチスワイプを有効にするか否か 初期:true



Wordpressでも利用できるので、下手なWordpressプラグインを使うよりも、よっぽど、高機能でクールなスライダーが利用できますよ。

a:616 t:2 y:0

コメント


認証コード1186

コメントは管理者の承認後に表示されます。