« サムネイル付きのスライドギャラリーを実装するjQueryプラグイン (1) #jQuery | トップページ | タッチパネル用に最適化された日付や時刻を入力するプラグイン「Mobiscroll」 #jQuery »

2011年7月25日 (月)

divタグで囲われた内容をスライドさせてくれるスクリプト #jQuery

divタグで囲われた内容をスライドさせてくれるスクリプト「Slick and Accessible Slideshow Using jQuery」をご紹介いたします。

デモページ

画像のスライドショーは多いのですが、div要素をスライドさせるのは数が少ないのではないでしょうか。
h2タグやstrongタグが使えるのが魅力ですね。

今回のスクリプトはlicenseの表記がなかったため、ご紹介という形にさせていただきたいと思います。
スライドさせたい枠の大きさ指定だけ補足で解説いたします。

スライドさせる枠の大きさを指定したい。
デモでは枠の大きさを560pxに設定していました。
大きさを変更したい場合は、、、
Block 2のwidthとheightで枠の指定をしますが、縦方向へのスクロールバーの調節があります。
Block 2にてwidthとheightを指定します。
またBlock 5(Block 6も同様となります)のslideWidthの値もBlock 2で指定したWidth値を記述します。
Block 3にもwidth値を記述しますが、Block 2のwidth値より20pxを引いた値にします。

|

« サムネイル付きのスライドギャラリーを実装するjQueryプラグイン (1) #jQuery | トップページ | タッチパネル用に最適化された日付や時刻を入力するプラグイン「Mobiscroll」 #jQuery »

jQuery」カテゴリの記事

コメント

コメントを書く



(ウェブ上には掲載しません)


コメントは記事投稿者が公開するまで表示されません。



トラックバック

この記事のトラックバックURL:
http://app.f.cocolog-nifty.com/t/trackback/1378074/40919943

この記事へのトラックバック一覧です: divタグで囲われた内容をスライドさせてくれるスクリプト #jQuery:

« サムネイル付きのスライドギャラリーを実装するjQueryプラグイン (1) #jQuery | トップページ | タッチパネル用に最適化された日付や時刻を入力するプラグイン「Mobiscroll」 #jQuery »