jQueryで横幅いっぱいのコンテンツスライダー、jQuery Full-width Sliderというプラグインをつくりました。 トップページのメインビジュアルとかで使えると思います。というか昔の案件で使ったものをブラッシュアップしたものです。画像以外も使えます。 jquery.fullwidthslider.1.0 デモ:http://demo.torounit.com/fullwidthslider/ 2012-02-09:デモのCSSを修正。IE対応。 デモの写真はFree.Stockerのを使わせて頂いています。良い写真いっぱいありますよねここ。 使い方 js [js] $(function(){ $(".slide").fullWidthSlider({ width:640, height:480 }); }) [/js] html [html] <div class="sli
これらの設定値を変更することでもろもろ調整が可能になっています。 スクリプト全体はあまりシンプルと言える構成ではありませんが、少しの設定値を調整するだけで簡単に設置することは可能になっているかと思います。 設置の際の簡単な注意点としては、HTML構成上このコンテンツスライダー要素全体を囲うブロック要素があった場合は、 その要素の幅は100%になっている必要があります。 併せて、この形状のコンテンツスライダーを１ページ内に複数設置することはあまりないかと思いますが、複数設置した際には自動スライド機能は一つ目のスライダーのみにしか動作しません。 ※2016/01/09 改定 カスタマイズに関しては、jQueryイージングプラグインを使って簡単にスライドアニメーション動作に抑揚をつけたり、CSSを少し調整することでページネーションをスライダーエリアから外へ出すことなども可能です。 ページネーショ
bell賞味期限切れコンテンツ この記事は公開または最終更新から1703日くらい経過しています。 このメッセージが表示されている記事（特にプログラミング系）は情報が古くなっている可能性があるので注意して下さい。 レスポンシブにも対応していて、スマホなどのタッチデバイスによるスワイプ操作にも対応したコンテンツスライダーです。 触ってみたらなかなか良い感じだったのですが、日本語の情報が少なかったのでメモ。 Swiperの主な特徴 レスポンシブ 横スライドだけじゃなくて縦スライドにも対応 フリーモード（自分で動かした分だけしかスライドしなくなる） カルーセルモード jQueryなしで単体動作させることもできる（jQueryで発火させることも出来る） コンテンツスライダーなので画像だけじゃなくてなんでも詰め込める などでしょうか？ 他にもたくさんありますので、公式サイトのFeaturesを読んでみ
最近タッチデバイスでスワイプしてスライドするようなUIを書く機会が多いので汎用的に使えるようにしてみた。 DEMO pxgrid/js-flipsnap - GitHub iScrollでもsnapっていう機能使うと同じようなことができるんだけど、iScrollでこれをやろうとするとこのスクロールが効いてるところはネイティブの縦スクロールが効かなくなるという問題があって、それを解決しようと思って最初はiScrollの内部をいじってたんだけど、ちょっとiScrollベースだとどうしても無理なところがあったのでこの機能だけ切り出してみたというわけ。 一応Androidでも動いてるっぽい。 iScrollみたいに多機能じゃないけどまあこれだけ使いたいっていうこと結構あるので割といいんじゃないかと。TODOはとりあえずドキュメント。 追記（2012/02/04）：クロスブラウザに対応しました。
写真画像をブラウザいっぱいに表示し、ウェブページにフル表示の背景画像やスライドショーを設置するjQueryのプラグインを紹介します。 ドットベースのオーバーレイ用の画像が数多く用意されているので、画像にスタイリッシュなエフェクトを加えることも簡単にできます。 デモページ サムネイルをクリックすると、写真画像が変更されます。 Vegasの実装 外部スクリプト 「jquery.js」と当スクリプトを外部ファイルとして指定します。 <script type="text/javascript" src="jquery.js"></script> <script type="text/javascript" src="/vegas/jquery.vegas.js"></script> スタイルシート スタイルシートもあらかじめ用意されており、外部ファイルとして指定します。 <link rel="st
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
