アクセシビリティに配慮した軽量・高機能スライダー。 ほかのライブラリに依存せず、Lighthouseのエラーもありません。
Splide - アクセシビリティに配慮した軽量・高機能スライダー
アクセシビリティに配慮した軽量・高機能スライダー。 ほかのライブラリに依存せず、Lighthouseのエラーもありません。
Apple（日本）
Apple Footer 日本ではapple.com/jp、Apple Store App、お近くのApple Storeで購入できます。Apple Storeでの購入にはデモのオンライン予約が必要です。 下取りサービスは、Appleの下取りプログラムのパートナー会社によって提供されています。下取りの見積もり額は目安であり、実際の下取り額は見積もりよりも低くなる場合があります。下取り額は異なる場合があり、下取りに出すデバイスの状態、年数とモデルにもとづきます。一部のデバイスは下取りの対象ではありません。成人の方のみが対象です。下取り額は新しいデバイスの購入が条件となり、制限が適用される場合があります。お手持ちのデバイスの下取り額を新しいApple製デバイスの購入に使える場合があります。実際の下取り額の提供は、見積もりの際に提出された詳細と合致する適格なデバイスの受け取りにもとづきます。消費
Swiper - The Most Modern Mobile Touch Slider
Swiper is the most modern free and open source mobile touch slider with hardware accelerated transitions and amazing native behavior. Use it on websites, web apps, and mobile native/hybrid apps. Swiper, along with other great components, is a part of Framework7 and Ionic Framework - a fully-featured frameworks for building iOS & Android apps.
カルーセルUIを実現するJSライブラリまとめ(2024年版) - 導入手間や機能の比較紹介 - ICS MEDIA
いずれもMITライセンスで公開されていますので、個人・商用問わず利用可能です。 Slick.js Slickスリック.jsは簡潔なコードで実装できるのが特徴のモバイルフレンドリーなカルーセルライブラリです。機能は少なめですが、ナビゲーションや表示するスライド数を変更するといった基本的な機能は備わっています。jQueryプラグインのため実装にはjQueryを読み込む必要があります。タッチ・スワイプ操作にも対応しています。ReactやVue向けのモジュール、TypeScriptのサポートは公式で提供されていませんがOSSで存在します。 このJSライブラリの基本的な実装と、アニメーションをフェードに変えた作例を用意しました。 基本の作例 サンプルを別ウインドウで開く コードを確認する <div class="slick carousel"> <div>1</div> <div>2</div> <
これなら簡単！フリック操作に対応したスライダー・カルーセルを実装できるJavaScriptライブラリ -Flicking
フリック操作に対応したスライダー・カルーセルを実装できるJavaScriptライブラリを紹介します。スマホのフリック操作だけでなく、デスクトップのクリックやドラッグ操作にも対応しています。 シンプルなHTMLで簡単に実装でき、Vue、React、Angularもサポート、単体でも動作するJavaScriptです。 Flicking Flicking -GitHub Flickingの特徴 Flickingのデモ Flickingの使い方 Flickingの特徴 Flickingはその名の通り、フリック操作に対応したスライダー・カルーセルを簡単に実装できるJavaScriptライブラリです。新しくなったFlicking 3はフレキシブルで、さまざまな拡張機能を備えており、無限フリック・フリースクロール・スナップ・バウンドをはじめ、異なるサイズのパネル、静止位置のカスタマイズなどもできます。
ネイティブのタッチ・スワイプ操作に対応したスライダーを簡単に実装できるJavaScriptライブラリ keen-slider
ネイティブのタッチ・スワイプ操作に対応したさまざまなスライダーを実装できるJavaScriptライブラリを紹介します。 依存関係は一切なし、IE10を含むすべてのブラウザをサポートしています。
滑らかに動くスワイプ可能な非依存型のカルーセルライブラリ・「Embla Carousel」
Embla Carouselは滑らかに動くスワイプ可能な非依存型のカルーセルライブラリです。使い方も簡単です。 上にサンプルを用意しました。ベーシックなタイプで無駄もなく、タッチデバイスフレンドリー、汎用性も高くて、とても使いやすい印象です。 動きも滑らかでストレスなく使えます。オプションも豊富で本体スクリプトも軽量となっています。 <script src='https://unpkg.com/embla-carousel@latest/embla-carousel.umd.js'></script>サンプルのコードです。CDNが用意されていますので使わせてもらいました。 const emblaNode = document.getElementById("embla"); const options = { loop: true }; const embla = EmblaCarouse
layerJS
UX patterns like menus, sliders, layers & lightboxes, parallax effects, page-swipes, zoom effects, etc. are really just interactive animated layers. layerJS is a simple open source library that provides one simple universal concept to create such patterns in pure HTML. In layerJS Frames are containers that contain your content, like sub pages, menues, lightboxes, cards, slides, etc. These are fit
[JS]タッチ操作にも対応した快適なスライダー・カルーセルを実装する軽量スクリプト -Glide.js
jQueryなどのスクリプトやアニメーションのCSSに依存せずに、レスポンシブ対応の快適なスライダー・カルーセルを実装する軽量のスクリプトを紹介します。 スライダーは最後を表示した際に1枚目に巻き戻し、カルーセルは最後を表示した際に巻き戻さずにそのまま1枚目を表示します。 Glide.js Glide.js -GitHub Glide.jsの特徴 Glide.jsのデモ Glide.jsの使い方 Glide.jsの特徴 Glide.jsは他のスクリプトに依存性がないJavaScript ES6で実装されたスライダー・カルーセルです。軽量で快適に動作し、カスタマイズ性にも優れています。 依存性はなし スライダー・カルーセルに必要なものはすべて含まれています。 超軽量 22kb（gzip: 7kb)にすべての機能が搭載されています。 モジュール式 スクリプトはモジュール式。必要のない機能を削除
![[JS]タッチ操作にも対応した快適なスライダー・カルーセルを実装する軽量スクリプト -Glide.js](https://cdn-ak-scissors.b.st-hatena.com/image/square/ff1d16e9316c76742c63906c5f9dd35a2bf6ab85/height=288;version=1;width=512/https%3A%2F%2Fcoliss.com%2Fwp-content%2Fuploads-201802%2F2018041501.png)
便利すぎ！jQuery不要のスライダー「Swiper.js」で色々と遊んでみよう | WordPressテーマ／DigiPress
汎用性に優れている、超定番のjQueryベースのスライダーライブラリといえば、「slick」、「bxSlider」、「FlexSlider」 あたりでしょうか。 しかし、これらの名だたるライブラリよりも、総合的に機能が豊富でカスタマイズ性にも富み、しかもjQueryに依存しないJavaScriptスライダーライブラリとして人気を集めているのが、「Swiper.js」です。 試してみたところ、モバイルデバイスとレスポンシブ表示にも対応しているだけでなく、パラメータが豊富で非常に凝ったスライドショーでもあまりに簡単に実装できる優れものだったので、いくつかのサンプルと共にご紹介します。 Swiper.js の基本的な使い方 Swiper.js を使用するには、headセクション内にCSSと、</body>の前にメインのJavaScriptファイルを読み込んでおきます。 ライブラリ自体をダウンロー
JavaScriptは適切に利用することが大事！HTMLとCSSだけで実はかなり高機能なスライダーを実装することができる
スライダーとは、ナビゲートできる一列に並べられた複数のボックスのことです。もちろん、あなたはスライダーが何であるかを知っているでしょう。 スライダーにはたくさんの機能があり、スワイプやスクロールできたり、自動再生やアニメーションを備えているものもあります。 HTMLとCSSだけで、見栄えがよい機能的なスライダーをどこまで実装できるか紹介します。HTMLとCSSを理解することで、JavaScriptも適切に利用できるようになります。 You can get pretty far in making a slider with just HTML and CSS 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 Step 1: 最初にセマンティックなマークアップ Step 2: flexboxを使ってスライダーを実装 Step 3:
CSSだけでOK！レスポンシブ対応のズームイン・ズームアウトを繰り返すCSSフェードスライダー - コムテブログ
TL;DR CSS だけで動く「ズームインとズームアウトをフェードしながら交互に繰り返す CSS スライダー」です。 slider デモ 作成したデモはこちら。交互にズームインとズームアウトを繰り返し表示しています。CSS でみたい人は「VIEW COMPILED」を押してください。 2019/01/29 追記：IE でカクつく場合は、以下を li に追加するか、@keyframes に width 幅を px で指定してください。 参考にさせていただいたのは、css だけで作るスライダー – PeonyQueenで作成されているスライダー。 上記のスライダーがとてもよく出来ていて CSS のアニメーションで時間差をつけてスライドを切り替え、フェードインを繰り返すようになっています。CSS なので読み込みや動作も早く扱いやすいです。 こちらを参考に、html の img 記述をなくし、フェ
コピペで実装OK、最新トレンドを押さえたすごい HTML/CSS スニペット40個まとめ
ますます進化するウェブデザインの世界を体感でき、コピー&ペーストで利用することもできる HTML/CSS スニペットをまとめてご紹介します。ただいま流行中のWebトレンドの実装を可能にする最新レイアウトから、どんなプロジェクトにも活用したくなるエフェクトやテクニックなどを中心にまとめています。 「Run Pen」をクリックすることで読み込みが開始されます。右下に表示された「Return」で再読み込みし、左上のHTML/CSS/JSタブを切り替えることで、それぞれのスタイリングを確認できます。実際にカスタマイズしたいときは、右上の「Edit on Codepen」をクリックしましょう。 詳細は以下から。 コピペでOK、最新トレンドを押さえたすごい HTML/CSS スニペット40個まとめ 01. Fixed Images That Fades as You Scroll 画面を２分割し、スク
魅力的な動きを手に入れる フリーアニメーションチュートリアル「26 Free Animation Tutorials for Web Developers」
TOP > Design > 魅力的な動きを手に入れる フリーアニメーションチュートリアル「26 Free Animation Tutorials for Web Developers」 webサイトをより魅力的に見せるには、デザイン性ももちろんですが、ユーザーを惹きつける動きにもこだわることが重要。しかしただ考えているだけでは、なかなかアイデアとしてひらめくことは難しいのではないでしょうか？今回はそんなときに参考にしたい、フリーアニメーションチュートリアル「26 Free Animation Tutorials for Web Developers」を紹介したいと思います。 A Collection of Page Transitions 26種類の、いろいろな動きを表現できるアニメーション作成のためのチュートリアルがまとめられています。 詳しくは以下 Text Opening
レスポンシブ対応されたLightbox系プラグイン・ライブラリ 10 - NxWorld
レスポンシブ対応されたLightbox系のプラグインやライブラリのまとめで、ほとんどがjQueryプラグインになりますが、中には単体で動くものもあります。 また、対応コンテツやエフェクトが多数あるもの、オプションがひと通り揃っているもの、動きや見栄えは少し簡易的になりますがIE7・8といったブラウザまで対応しているものなどタイプも様々です。 紹介時に対応ブラウザやデバイスに関しても記載している内容は、基本的に各配布先で記載されているものになります。 ただ、特にIEの場合は対応しているが他のブラウザに比べ動きが簡易的になってしまっていたり動きが怪しいものなどもあるので、対応しているという記載があっても使用前に自身で動きの確認をおすすめします。 Swipebox プラグイン名にもあるようにスワイプで画像を切り替えることができ、ギャラリーやビデオにも対応しているjQueryプラグインです。 オプ
[JS]スライダーのスクリプトを探しているなら絶対チェックした方がいいスクリプト -Slider Pro
デスクトップ、スマホ、タブレットの表示・操作に対応したさまざまなスライダーを実装できるjQueryのプラグインを紹介します。 今必要とされるさまざまな機能を備えています。 「Pro」がついてるから有料？って思うかもしれませんが、MITラインセンスで個人でも商用でも無料で利用できます。 Slider Pro Slider Pro -GitHub Slider Proの特徴 Slider Proのデモ Slider Proの使い方 Slider Proの特徴 Slider Proはさまざまなスライダーをモジュール式に実装でき、レスポンシブ対応、タッチ操作にも対応したjQueryのプラグインです。 デフォルトの5タイプのスライダー 機能は非常に豊富です。 さまざまなデバイスのスクリーンに対応 デフォルトで完全にレスポンシブ対応（デモ全て） タッチ・スワイプ操作に対応（デモ全て） ブレイクポイント
![[JS]スライダーのスクリプトを探しているなら絶対チェックした方がいいスクリプト -Slider Pro](https://cdn-ak-scissors.b.st-hatena.com/image/square/662c60ab62c1f546c5985eed5c70eddf66814399/height=288;version=1;width=512/https%3A%2F%2Fcoliss.com%2Fwp-content%2Fuploads-201404%2F2014111905.png)
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
12 Ready-to-Use Sliders for Your Website | SpyreStudios
Search javascript libraries
Swiper - Most Modern Mobile Touch Slider
レスポンシブで横幅いっぱいに表示できるjqueryカルーセルいろいろ | バニデザノート
