Webサイトを開発していると必ずと言っていいほどスライダーを作る機会が出てくると思います。そんな時の一つの選択としてSwiper.jsはおすすめのライブラリと言えます。 jQuery非依存で、オプション豊富で、カスタマイ […]
Javascript
【Swiper】スマホ(SP)のみスライダーにする方法
Swiper.jsを使ってスマホ(SP)の時のみスライダーにする方法について記します。 外側からスライダーの解除/生成をする記事を多く見かけたのですが、Swiperのオプション内で解決したかったので模索した結果、違う方法 […]
【Swiper】PCとSPで表示枚数を切り替える【レスポンシブ】
当記事では、Swiper.jsのbreakpointsオプションを使用して、表示枚数をPCとSPでレスポンシブに切り替える方法について記します。 通常のSwiper.jsでのスライダーの作成はご存じの前提で進めさせていた […]
Swiper9と10でloop×slidesPerViewが動かない件
Swiper.jsのバージョン9と10でオプションのloopとslidesPerViewを併用すると、loopが効かない（止まる）という現象が発生します。この現象の原因と解決策について記します。 推定原因と発生条件 わた […]
【Javascript】見出しから目次を自動生成する方法
当記事ではJavascriptを使用して見出しから目次を自動生成する方法について記します。複数階層の見出しにも対応しています。 やりたいこと 下記のようなHTMLがある時に、Javascriptを使用して、見出しから目次 […]
【Javascript】一度実行されたら破棄されるイベントの書き方
現代の主要ブラウザにおいて、Javascriptで一度だけ一度だけイベントを実行するのにremoveEventListenerもフラグも必要ありません。とても素晴らしいオプションが用意されているので、刮目しましょう。 す […]
【Javascript】HTML文字列からNodeに変換する方法
当記事ではHTML文字列からNodeに変換する方法について記します。 HTML文字列からNodeに変換 これはとても簡単で1行で関数を定義できます。ここから先は補足情報になります。 変換したNodeに対してはDOM操作が […]
【Javascript】イベントの発生元がユーザーの操作か判定する方法
当記事ではイベントの発生元が実際のユーザーの操作なのか、スクリプトによる強制発火によるものなのかを判定する方法について記します。 Javascriptでイベントの発生元がユーザーの操作か判定 イベントリスナーのコールバッ […]
【Swiper×React】矢印とドットを外に出す方法
Swiper×Reactで作成したスライダーのナビゲーション（矢印）とページネーション（ドット）をスライドの外に配置したい時があると思います。当記事ではその方法をデモを交えながら解説します。 ①通常のSwiperスライダ […]
【Swiper×React】サムネイル付きのスライダーを作成する
当記事では、swiper.jsとReactを使用してサムネイル付きのスライダーを作成する方法についてデモ付きで解説します。swiper.jsのオプションを使用して二つのスライダーを連動させることで実現します。 ①メインの […]
