スライダーを作成するライブラリは沢山ありますが、その中の一つであるSwiper.jsはjQueryを使わずに実装できるのが魅力のひとつです。 当記事ではSwiper.jsをReactで使う方法について記します。※Reac […]
Swiper.jsをReactで使う方法
swiper
【Swiper×React】自動で流れ続ける無限ループスライダーを作成する
当記事ではswiper.jsとReactを使用して、自動で流れ続ける無限ループスライダーを作成する方法について記します。 Swiper.jsとReactの基本的な使い方はご存じの前提で進めさせていただきます。 ①矢印とド […]
【Swiper】ネストスライダーを作成する
当記事では、Swiper.jsを使用してスライダーが入れ子になったネストスライダーを作成する方法とその注意点についてデモ付きで記します。 通常のSwiper.jsでのスライダーの作成はご存じの前提で進めさせていただきます […]
【Swiper】エフェクトオプションで作成できるスライダー6選
Swiper.jsにはエフェクトオプションというものが用意されており、アニメーション効果を持つスライダーを簡単に作成する事ができます。この記事ではswiper.jsのエフェクトオプションを使用して作成できるスライダーをす […]
【Swiper】フェードスライダーを作成する
swiper.jsのエフェクトオプションを使用してスライドがふわっと切り替わるフェードスライダーを作成する方法を記します。 通常のSwiper.jsでのスライダーの作成はご存じの前提で進めさせていただきますので、Swip […]
【Swiper】クリエイティブエフェクトでオリジナルスライダーを作成する
Swiper.jsにはcreativeEffectというオプションが用意されており、アクティブスライドの前後のスライドに対してかなり自由に変更を加える事ができるため、うまく活用することによってオリジナルのスライダーを作成 […]
【Swiper】スライダーのアクセシビリティを向上させる
Javascriptのスライダーライブラリの中でも人気がある『swiper.js』はオプションがとても豊富です。当記事ではswiper.jsのオプションを使用してスライダーのアクセシビリティ（操作性）を向上させる方法につ […]
Swiperスライダーの矢印のサイズや位置や色を変更する
Swiper.jsで作成したスライダーのナビゲーション（矢印）のサイズや位置や色を変更したい時があると思います。当記事ではその方法をデモを交えながら解説します。 通常のSwiper.jsでのスライダーの作成はご存じの前提 […]
Swiperスライダーのページネーションのサイズや位置や色を変更する
Swiper.jsで作成したスライダーのページネーション（ドット）のサイズや位置や色を変更したい時があると思います。当記事ではその方法をデモを交えながら解説します。 通常のSwiper.jsでのスライダーの作成はご存じの […]
Swiperスライダーのデモ19選
Swiper.jsを使用して作成できるスライダーのサンプル19選をデモ付きでご紹介します。また、それぞれのスライダーの作成方法を記した記事のリンクも載せておきます。 ①ノーマルなスライダー まずは特にカスタマイズしていな […]
