[B! JavaScript][Slider] shirotorabyakkoのブックマーク

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.

shirotorabyakko 2021/10/14

リンク

カルーセル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> <

shirotorabyakko 2021/09/03

リンク

これなら簡単！フリック操作に対応したスライダー・カルーセルを実装できるJavaScriptライブラリ -Flicking

フリック操作に対応したスライダー・カルーセルを実装できるJavaScriptライブラリを紹介します。スマホのフリック操作だけでなく、デスクトップのクリックやドラッグ操作にも対応しています。シンプルなHTMLで簡単に実装でき、Vue、React、Angularもサポート、単体でも動作するJavaScriptです。 Flicking Flicking -GitHub Flickingの特徴 Flickingのデモ Flickingの使い方 Flickingの特徴 Flickingはその名の通り、フリック操作に対応したスライダー・カルーセルを簡単に実装できるJavaScriptライブラリです。新しくなったFlicking 3はフレキシブルで、さまざまな拡張機能を備えており、無限フリック・フリースクロール・スナップ・バウンドをはじめ、異なるサイズのパネル、静止位置のカスタマイズなどもできます。

shirotorabyakko 2021/05/31

リンク

ネイティブのタッチ・スワイプ操作に対応したスライダーを簡単に実装できるJavaScriptライブラリ keen-slider

ネイティブのタッチ・スワイプ操作に対応したさまざまなスライダーを実装できるJavaScriptライブラリを紹介します。依存関係は一切なし、IE10を含むすべてのブラウザをサポートしています。

shirotorabyakko 2021/04/09

リンク

滑らかに動くスワイプ可能な非依存型のカルーセルライブラリ・「Embla Carousel」 - かちびと.net

Em bla Carouselは滑らかに動くスワイプ可能な非依存型のカルーセルライブラリです。使い方も簡単です。上にサンプルを用意しました。ベーシックなタイプで無駄もなく、タッチデバイスフレンドリー、汎用性も高くて、とても使いやすい印象です。動きも滑らかでストレスなく使えます。オプションも豊富で本体スクリプトも軽量となっています。 <script src='https://unpkg.com/em bla-carousel@latest/em bla-carousel.umd.js'></script> サンプルのコードです。CDNが用意されていますので使わせてもらいました。 const em blaNode = document.getElementById("em bla"); const options = { loop: true }; const em bla = Em blaCarous

shirotorabyakko 2020/08/31

リンク

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

shirotorabyakko 2018/05/18

リンク

[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)にすべての機能が搭載されています。モジュール式スクリプトはモジュール式。必要のない機能を削除

shirotorabyakko 2018/04/16

リンク

便利すぎ！jQuery不要のスライダー「Swiper.js」で色々と遊んでみよう | WordPressテーマ／DigiPress

汎用性に優れている、超定番のjQueryベースのスライダーライブラリといえば、「slick」、「bxSlider」、「FlexSlider」あたりでしょうか。しかし、これらの名だたるライブラリよりも、総合的に機能が豊富でカスタマイズ性にも富み、しかもjQueryに依存しないJavaScriptスライダーライブラリとして人気を集めているのが、「Swiper.js」です。試してみたところ、モバイルデバイスとレスポンシブ表示にも対応しているだけでなく、パラメータが豊富で非常に凝ったスライドショーでもあまりに簡単に実装できる優れものだったので、いくつかのサンプルと共にご紹介します。 Swiper.js の基本的な使い方 Swiper.js を使用するには、headセクション内にCSSと、</body>の前にメインのJavaScriptファイルを読み込んでおきます。ライブラリ自体をダウンロー