bl6.jpホームニュースレビューお出かけアプリウェブサイトMacカメラレタッチTips雑記bl6.jpファッション、写真、旅行、ガジェットなどの備忘録menuホームJavaScriptjQueryプラグインのレスポンシブなカルーセルのスライダー「Elastislide」を使ってみたJavaScript2012.01.20jQueryプラグインのレスポンシブなカルーセルのスライダー「Elastislide」を使ってみたjQueryプラグインで画面のサイズによってレイアウトを合わせてくれるレスポンシブなスライダー「Elastislide」を使ってみました。カルーセルタイプのスライダーなので結構使う機会がありそうな感じです。アイディア次第で色んな用途に応用が効きそうですね。iPhoneでも確認してみたところ、ちゃんとレイアウトも調整されてスライダーも動作しました。いうことで以下、使い方です。以下のサイトからダウンロードできます。Pluginデモもあります。DEMO使い方はとても簡単です。ダウンロードしたファイルを読み込みます。最初にhead内にCSSファイルを読み込みます。/>あとは</body>の直前にJSを読み込みます。});</script>head内に読み込みたい場合は$で括ればいいかと思います。});});</script>次にHTMLです。</div></div>これだけで簡単に実装できます。わかりやすくていいですね。オプションも色々あるので変えてみるとおもしろいです。実際のブラウザではこんな感じに表示されます。画面サイズを縮小してみると。画面に合わせて調整されますね。ちなみにiPhoneでも見てみるとこのようになります。最適化されて表示されますね。オプションオプションではスライドするスピードや画像の横幅なんかを指定できます。}});speedスライドする時のスピードです。値を高くすると遅くなり、低くすると速くなります。easingデフォルトでは特に指定されてないんですが、ここをeaseInBackと指定すると一瞬バックしてからスライドするようになります。imageW画像を表示する時の横幅を指定できます。margin画像の右側のマージンを指定でき、間隔を調整することができます。border画像まわりのボーダーの太さを変更できます。minItems画面のサイズを小さくした時に最小限表示させる画像の数を決めることができます。currentページを読み込んだ時に何番目の画像から表示させるかを指定できます。onClick要素をクリックした時のコールバックを指定することができます。いうことで、なかなかいい感じのスライダーかと思います。)この記事へのコメントはありません。この記事へのトラックバックはありません。URL返信をキャンセルする。-URL検索:プロフィールbl6.jp心がときめく「モノ」や「コト」を中心に紹介しています。レビューや日記なんかも。TwitterFacebookInstagram最近の記事2020.02.20いつもの音楽をハイレゾ級で。ソニーの完全ワイヤレス...ソニーからハイレゾ級高音質と優れた接続性を備えた小型・軽量の完全ワイヤレスイヤホ...2020.02.19三色ボールペンの青と緑を「黒」に変えるいつも仕事で使っているジェットストリームの三色ボールペン(+シャーペン付き)。こ...2020.02.18成城石井オリジナルコーヒー豆「ブラジルイパネマ」アマゾンで買い物中に見つけた成城石井オリジナルコーヒー豆「ブラジルイパネマ」。...2020.02.17梅しば1年のどこかで無性にカリカリ梅を食べたくなる時期がある。