タグ

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

  • ResponsiveSlides.js · Responsive jQuery Slider & Slideshow

    ResponsiveSlides.js v1.55 Simple & lightweight responsive slider plugin (in 1kb) ResponsiveSlides.js is a tiny jQuery plugin that creates a responsive slider using elements inside a container. It has been used on sites like Microsoft's Build 2012 and Gridset App. ResponsiveSLides.js works with wide range of browsers including all IE versions from IE6 and up. It also adds css max-width support for

  • レスポンシブ対応などコンテンツスライダー/スライドショー用jQueryプラグイン50+ | co-jin

    サイトのコンテンツをリッチに見せるだけでなく、省スペースで数多くのコンテンツを効率的・効果的に表示できるスライダー。 今回は無料で利用できるバリエーション豊富なスライダー用jQueryプラグインをご紹介します。 画像のスライダーから、レスポンシブ対応、フルスクリーン対応のほか、目を引くアニメーションによる画像の切り替えやコンテンツそのもののスライダーなど、多くのプラグインを集めてみました。 今後のコンテンツ制作にお役立ていただければ幸いです。 Swiper レスポンシブ対応で、スマホなどのタッチデバイスでのフリッカブル(スワイプ)にも対応したコンテンツスライダー。 オートプレイのほか、縦スライドや3Dエフェクト、ネスト構造(コンテンツにさらにスライダーを設置できる)対応と、幅広い表現が可能な、使い勝手のよいスライダーです。 設置も簡単、スワイプの反応もよい。 当にオススメのスライダーです

    レスポンシブ対応などコンテンツスライダー/スライドショー用jQueryプラグイン50+ | co-jin
  • jQueryでレスポンシブ対応のブラウザウィンドウ幅めいっぱいに要素を並べたコンテンツスライダーを設置する実験|BLACKFLAG

    半年ほど前にここで、「jQueryでブラウザウィンドウ幅めいっぱいに要素を並べたコンテンツスライダーを設置する実験」と題して、画面幅めいっぱいでのコンテンツスライダーを紹介しましたが、当時紹介したスクリプト構成だとレスポンシブには対応していませんでした。 同じ、画面幅めいっぱいでのコンテンツスライダー構成でレスポンシブ対応させたパターンを必要に駆られて作成してみたので、ここでも紹介してみたいと思います。 【2014/01/15】 スライダー部分にフリック動作を追加しました。スクリプト内の設定でフリック動作のON/OFFを設定が可能です。 このスライダーはなかなか言葉では説明しずらいのでまず動作サンプルから。 「jQueryでレスポンシブ対応のブラウザウィンドウ幅めいっぱいに要素を並べたコンテンツスライダーを設置する実験」サンプルを別枠で表示 スライダー中心にメイン表示エリアを設置して、その

    jQueryでレスポンシブ対応のブラウザウィンドウ幅めいっぱいに要素を並べたコンテンツスライダーを設置する実験|BLACKFLAG
  • レスポンシブWebデザイン対応のjQueryイメージスライダー・FlexSliderがWordPressプラグインになってた

    以前ご紹介した、iPhoneiPadなど 様々なデバイスにレイアウトを自動 で対応するレスポンシブWebデザイン 対応のjQuery製のイメージスライダー FlexSliderがWordPressプラグインに なっていました。 高機能ってものではないですけど、似たようなものを作るつもりで放置してたのでありがたかったのでついでにシェアします。 Responsive Slider Plugin With FlexSlider for WordPress 簡単にWordPressに導入出来るようにしてくれました。 カスタム投稿タイプで管理 仕組みが凄く参考になりました。ちょっと発想が無かったんですが、カスタム投稿タイプで作成したコンテンツをショートコードで呼び出しています。いい方法ですねーこれ。 仕組み備忘録として簡単に仕組みをメモ。 カスタム投稿タイプを作るdefine('CPT_NAME'

    レスポンシブWebデザイン対応のjQueryイメージスライダー・FlexSliderがWordPressプラグインになってた
  • slick - もうこれで十分!なカルーセルライブラリ MOONGIFT

    画像をスライドで切り替えていくカルーセル機能は数多くのWebサイトで実装されています。サイトの機能を紹介するのに使ったり、ギャラリーとして画像を切り替えるのにも使えます。アイディア次第で使いところが多い機能です。 便利さゆえに多数のライブラリが出てきていますが、もうこれで十分ではないかと思わせるのがslickです。多彩な機能を揃え、オプションも豊富なカルーセルライブラリです。 slickの使い方 まずはサンプルと一緒に。これが一番ベーシックな使い方です。 $("target").slick() で実現されます。 レスポンシブにも対応しています。 フリック操作で切り替えも可能です。 複数のスライドを同時に見せることもできます。 画像読み込みを遅延させることもできます。 左右からの表示だけでなくフェードインなどのアニメーションもできます。 スライドを追加したり削除するのも自由です。 スライドを

    slick - もうこれで十分!なカルーセルライブラリ MOONGIFT
  • slick - the last carousel you'll ever need

    Features Fully responsive. Scales with its container. Separate settings per breakpoint Uses CSS3 when available. Fully functional when not. Swipe enabled. Or disabled, if you prefer. Desktop mouse dragging Infinite looping. Fully accessible with arrow key navigation Add, remove, filter & unfilter slides Autoplay, dots, arrows, callbacks, etc... Single Item

    slick - the last carousel you'll ever need
  • 1