Keen-Slider でレスポンシブに対応する
こんにちは、上條（mk-0A0）です。 先日スライダーの実装に Keen-Slider を使ったのですが、その際にレスポンシブってどうやるんだ…？となったので、試したことを書こうと思います。 Keen-Slider とはスライダーを実装できるライブラリです。 JavaScript や React はもちろん、Vue, Angular にも対応しています。 そして依存関係が無いため 5.5KB と軽量なのも嬉しいところです。 公式通りに実装するReact の導入手順で実装してみます。 import { useKeenSlider } from 'keen-slider/react' import 'keen-slider/keen-slider.min.css' const KeenSlider = () => { const [sliderRef] = useKeenSlider({ sl
pure-react-carousel でカルーセルを実装する
こんにちは、 Gaji-Labo フロントエンドエンジニアの石垣です。 今回は React 用カルーセル実装ライブラリである pure-react-carousel でカルーセルを実装する機会があったので、やり方とカスタマイズ方法などをまとめてみたいと思います。 pure-react-carousel とは？pure-react-carousel は React に最適化されたカルーセル実装ライブラリです。 カルーセルを実装するためのビルトインコンポーネントが用意されており、またデフォルトのCSSスタイルが最低限に抑えられているためスタイルのカスタマイズがしやすいのが特徴的です。 以下のようにビルトインコンポーネントを使って基本的なカルーセルを実装できます。 import React from "react"; import { Slider, Slide, ButtonBack, But
斬新な切り替えエフェクトをもつスライダー実装「Elastic Slider」:phpspot開発日誌
Elastic Slider 斬新な切り替えエフェクトをもつスライダー実装「Elastic Slider」 スワイプでびよーんと画像が切り替わります 関連エントリ 日付や時間を指定するスライダーUI実装「jquery-time-slider」
jQueryでフリック（ドラッグ）可能な要素が流れ続けるループスライダーを実装する方法｜BLACKFLAG
以前も当ブログでjQueryを使ったループスライダーを紹介しましたが、フリック（ドラッグ）操作が実装されていませんでした。 ループスライダーにフリック（ドラッグ）動作が実装されたパターンはわりと需要があるのに、そのような仕様のプラグイン等はあまり一般的に公開されていないようだったので、以前紹介したスクリプトを改良してフリック（ドラッグ）動作を実装したループスライダーを作成したので紹介してみます。 「jQueryでフリック（ドラッグ）可能な要素が流れ続けるループスライダーを実装する方法」サンプルを別枠で表示 Webページに並べられた要素が右から左へ流れ続けるループスライダーでスライダーをフリック（ドラッグ）することができます。 動作自体はただひたすら要素が流れ続けるシンプルなものです。 全体構成についてまずはHTMLから。 ◆HTML <div class="loopSlider"> <ul
どこよりも詳しい万能スライダーjQueryプラグインslick.jsの使い方 | ITハット
どこよりも詳しい万能スライダーjQueryプラグインslick.jsの使い方 いろいろなスライダー・カルーセルjQueryプラグインを利用してみて、一番簡単でカスタマイズ性に富んだものがこのslickです。非常に便利な分、注意しなければならないこともあるので、その点も含めて紹介したいと思います。 導入 ダウンロード http://kenwheeler.github.io/slick/ サイト上部のメニューのget it nowをクリックします。 Download Nowをクリックでダウンロードすることができます。 読み込み <head> ... <link href=".../path/to/slick.css" rel="stylesheet"> </head> head 内で slick.css を読み込みます。 ... <script src="https://ajax.google
これなら簡単！フリック操作に対応したスライダー・カルーセルを実装できるJavaScriptライブラリ -Flicking
フリック操作に対応したスライダー・カルーセルを実装できるJavaScriptライブラリを紹介します。スマホのフリック操作だけでなく、デスクトップのクリックやドラッグ操作にも対応しています。 シンプルなHTMLで簡単に実装でき、Vue、React、Angularもサポート、単体でも動作するJavaScriptです。 Flicking Flicking -GitHub Flickingの特徴 Flickingのデモ Flickingの使い方 Flickingの特徴 Flickingはその名の通り、フリック操作に対応したスライダー・カルーセルを簡単に実装できるJavaScriptライブラリです。新しくなったFlicking 3はフレキシブルで、さまざまな拡張機能を備えており、無限フリック・フリースクロール・スナップ・バウンドをはじめ、異なるサイズのパネル、静止位置のカスタマイズなどもできます。
軽量で拡張的な非依存のカルーセルライブラリ・「Tiny-Swiper」
Tiny-Swiperは軽量で拡張的な非依存のカルーセルライブラリです。他ライブラリを必要とせず、軽量ながら単体で動作、必要に応じてプラグインで拡張する事も可能です。 名前からも想定できますがタッチフレンドリーな設計にもなっており、設定もシンプルで使いやすい印象です。 <script src="https://unpkg.com/tiny-swiper@latest/lib/index.min.js"></script> <script> var swiper = new Swiper(".swiper-container"); </script>本体を読みこんで対象を指定して <div class="swiper-container"> <div class="swiper-wrapper"> <div class="swiper-slide">Slide 1</div> <div cl
手軽に扱えるタッチフレンドリーで汎用的なカルーセルライブラリ・「keen-slider」
keen-sliderは手軽に扱えるタッチフレンドリーで汎用的なカルーセルライブラリです。 他ライブラリを必要としない非依存型でタッチデバイスファーストな設計となっています。操作もシンプルで様々な用途に使えそうな印象でした。 という訳で動作テストしてみました。 サンプル 使い方は従来通りです。 <link rel="stylesheet" href="keen-slider.min.css" /> <script src="keen-slider.js"></script>CSSとライブラリを読み込みます。 var slider = new KeenSlider('#my-keen-slider')読込先を指定します。 <div id="my-keen-slider" class="keen-slider"> <div class="keen-slider__slide">1</div>
タッチデバイスも完全サポート！さまざまなスライダーをシンプルなコードで実装できる軽量JavaScript -Tiny slider
デスクトップ・タブレット・スマホをサポート、シンプルなスライダーをはじめ、さまざまなスライダーを簡単に実装できる軽量JavaScriptを紹介します。 バニラJSで実装されており、他のライブラリへの依存はなく、単体で動作します。 HTMLは非常にシンプルで、外部ファイルと数行のコードで実装できます。 Tiny Slider -GitHub Tiny Sliderの特徴 Tiny Sliderのデモ Tiny Sliderの使い方 Tiny Sliderの特徴 Tiny SliderはOwl Carouselにインスパイアされた、多目的用の軽量スライダーを実装するJavaScriptです。MITライセンスで、商用のプロジェクトでも無料で利用できます。 シンプルなスライダーも下記のようなアニメーションを使ったスライダーも、非常に簡単なコードで実装できます。 多目的用のスライダー シンプルなスラ
スマホの操作も快適な優れもの！ビフォーアフター画像のスライダーを実装するJavaScriptライブラリ -Beer Slider
スマホ、タブレット、デスクトップのレスポンシブに完全対応、マウス操作・キーボード操作・タッチ操作にも完全対応のアクセシブルなスライダーを実装するスクリプトを紹介します。 他スクリプトへの依存は一切なく、単体で動作し、jQueryのプラグインとして実装することも可能です。 Beer Slider Responsive & Accessible Before-After Slider Beer Slider -GitHub Beer Sliderの特徴 Beer Sliderのデモ Beer Sliderの使い方 Beer Sliderの特徴 Beer Sliderは2枚の画像を使用して、ビフォーとアフターを表示できるスライダーです。 単体で動作するシンプルなスクリプト vanilla JavaScriptで記述されたスライダー。他スクリプトへの依存はありません。 jQuery, Zeptoに
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
日付や時間を指定するスライダーUI実装「jquery-time-slider」:phpspot開発日誌
darsa.in
スマホも対応！スクリーンいっぱいに表示させるスライダーを実装するスクリプト -FullScreen Slider
モバイルフレンドリーで軽量、高速なコンテンツスライダーを実装できるスクリプト・「Glider.js」 | かちびと.net