2024-05-29うひょさんに聞く! React 19アップデートの勘所 #React19_Findy

前置き 以下のような表示領域に複数スライドが表示されるスライダーを作りたいとき・・・ 要素のscrollLeftやtranslateXの値を操作することが多いのではないかと思います。 しかし、リキッド対応が必要な場合、このscrollLeftやtranslateXを用いた実装方法だと、 resize イベントのたびにスライドの width を再計算し直して、移動させる位置を調整する必要があるので少し手間がかかります。 そんなときにはscrollIntoViewを使うとサクッと実装できちゃいます。 もっと楽ができる。そう、 scrollIntoView ならね scrollIntoViewとは Element インターフェイスの scrollIntoView() メソッドは、scrollIntoView() が呼び出された要素がユーザーに見えるところまで、要素の親コンテナーをスクロールします
今日は最新のJavaScriptスライダー[Splide]を紹介します。 まずは[Splide.js]の特徴をいくつかピックアップします。 jQueryなどのライブラリに依存せず単体で動く 軽量(圧縮版で11kB) IE10以降対応 ブレイクポイントの指定でレスポンシブ対応 マウスのドラッグとタッチスワイプに対応 SEOフレンドリー スライダー、またはスライドショー、カルーセルに必要とされる要素はすべて揃っており、近年評価が高い[swiper.js]や[slick.js]などと肩を並べられるスペックです。 Splide → https://splidejs.com [Splide]本体ファイルをインストール Splide.jsをウェブサイトにインストールする方法は3つあります。 NPMでダウンロード CDNを利用 Githubからダウンロード 1.NPMの場合 $ npm install
スライダープラグインは何を使うべきか フロントエンドエンジニアのおとのです🙆♂️ Webサイトに以下のようなスライダーを埋め込む際、Web制作のコーダーやマークアップエンジニア、フロントエンドエンジニアは外部プラグインを利用して実装することが多いかと思われます。 jQueryが全盛期だった時には、Slickが多く利用されていた印象です。あらゆるオプションが用意されており、さまざまなカスタマイズが可能で、私もよく使ってきました。 また、IEのサポートが終了してからSwiperが利用されるようになった印象があります。こちらも複数のオプションがあり、比較的モダンなCSS(flex等)が組み込まれていることから、slickよりもカスタマイズが容易であるように思えます。jQueryに依存していないのも大きなメリットですね。 今までのスライダープラグインの問題 ただ、スライダープラグインは決して容
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く