[B! スライダー] SnowCaitのブックマーク

SnowCait id:SnowCait

スライダーに関するSnowCaitのブックマーク (3)

[JS]ユーザーが快適に操作できることにこだわった、タッチデバイスにも対応のスライダーを実装するスクリプト -Flickity
デモページ: ナビゲーション Flickityの使い方 Step 1: 外部ファイル当スクリプトとスタイルシートを外部ファイルとして記述します。 ※jQueryのプラグインとして利用する時は、jquery.jsを加えます。 <head> ... <link rel="stylesheet" href="/path/to/flickity.css" media="screen"> <script src="/path/to/flickity.pkgd.min.js"></script> </head> Step 2: HTML 各スライドをdiv要素などで実装し、ラッパーで内包します。 <div id="main-gallery"> <div class="gallery-cell">...</div> <div class="gallery-cell">...</div> <div cl
SnowCait 2015/02/16
JavaScript

スライダー

Flickity
リンク
[JS]これはかなりの優れもの！iOS用だけどIE7にも対応しているスライダーのスクリプト -iosSlider
iosSlider [ad#ad-2] iosSliderの特徴 iosSliderのデモ iosSliderの使い方 iosSliderの特徴ハードウェアアクセラレイト iOS, Android, Webkit系ブラウザ用にCSS3を使用します。レスポンシブデザインデスクトップ、スマートフォン、タブレットの各デバイスをサポート。コールバックウェブアプリとしてさまざまな用途に応えるためにコールバックを用意。全てのモダンブラウザをサポートデスクトップ用のFirefox, Chrome, Safari, IE7+をサポート。無限ループスライドは両方向に無限ループさせることもできます。オートスライディング自動スライドにも対応、ホバーで中断します。サポートブラウザ iosSliderがサポートするテスト済みのブラウザ一覧です。 Firefox5.0+ Chrome19.0+
SnowCait 2012/07/21
jQuery

JavaScript

スライダー
リンク
[JS]実装は簡単、機能は最小限、Responsiveデザイン対応の超シンプルなスライダーのスクリプト -Blueberry
表示サイズに合わせて最適なサイズで表示する、幅が固定ではないレイアウト用の超シンプルなスライダーを実装するjQueryのプラグインを紹介します。「Blueberry」という名前は、開発時に使った画像がブルーベリーだったからだそうです。デモページ：幅480pxで表示 [ad#ad-2] Blueberryの使い方実装はいたってシンプルです。外部ファイル「jquery.js」と当スクリプト、あと当スタイルシートを外部ファイルとして記述します。 ※スタイルシートはスライダーのベースとなるスタイルが記述されています。 <link rel="stylesheet" href="css/blueberry.css" /> <script src="https://ajax.google apis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></scrip
SnowCait 2012/06/03
jQuery

スライダー
リンク
1