タグ

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

  • slickでスライド総数と現在何枚目が表示されているかをカウント表示する方法 - NxWorld

    使い方次第で簡単に様々なタイプのカルーセルが実装でき、オプションやイベントも豊富に用意されているのが特徴のjQueryプラグイン「slick」で、スライド総数と現在何枚目が表示されているかをそれぞれカウント表示させるカスタマイズを紹介します。 slickの基的な使い方や実装方法については下記でもサイトやGitHubで確認できるので省略します。 実装イメージはこのようになっており、現在のスライド数 / スライド総数という形でカウントを表示させます。(イメージは全10枚中5枚目を表示しているという状態) デフォルトで用意されているバレットとかでも全部で何枚あり現在何枚目を表示しているかはわかりますが、よりパッと見でわかるようにしたいときやデザイン的にこのような表示にしたいとき、あとはスマートフォンなど表示領域が狭い場合にバレットやサムネイルなどがごちゃごちゃ配置されているのをどうにかしたいと

    slickでスライド総数と現在何枚目が表示されているかをカウント表示する方法 - NxWorld
  • クロスフェードして画像切替る、jQuery Pluginを書いてみた | CUT UP WORKS

    crossfader.jsの概要 クロスフェードして画像切替るjQuery Plugin crossfader.jsを書きました。 内容はタイトル通りフェードして画像が切り替えるようになっています。 使い回しが効くように細かい設定で色々とオプションを設置しています。 スタイルはカスタマイズしやすいようにお好みで設定するように作っています。 対応ブラウザ internet exploer 6, 7, 8, 9 FireFox 3.6+ chrome 17+ safari 4+ Android BrowserやiOS safariでブラウザ確認は行っていません。 サンプル サムネイルとコントローラーボタンはオプションで設置。 構造 メインイメージ部分はリストでマークアップして、li要素をcssで重ねます。 サムネイルは、オプションで設置しています。リストでマークアップしてスタイルはお好みで。

  • CSS3による様々なエフェクトが選択可能なレスポンシブWebデザイン対応イメージスライダーを実装するjQueryプラグイン・REFINESLIDE

    3Dやスライスなど、様々なアニメーション エフェクトを使用できて、且つレスポンシブ Webデザインにも対応可能なイメージスライ ダーを実装できるjQueryプラグインのご 紹介。REFINESLIDEというプラグインです。 覚えておいて損は無いのでは。 IEではフェードエフェクトのみになってしまいますが、iPhoneiPadなどではcss3による様々なエフェクトを利用できます。スマフォ用として利用するっていうのも手ですね。 スマフォとかにも対応できるCSS3+jQueryなイメージスライダーです。3Dな感じのとかスライスしたエフェクトの素敵なもありますのでインパクトは与えられそうですね。 実機で問題なく動作しました。 Sample 上記はIE7でサンプルにアクセスした際の状態です。赤いラベルはそのブラウザでは非対応、という意味です。 以下、そのサンプルページになります。Chromeなら全

    CSS3による様々なエフェクトが選択可能なレスポンシブWebデザイン対応イメージスライダーを実装するjQueryプラグイン・REFINESLIDE
  • 1