swiper

Swiper.jsをReactで使う方法

swiper slider

スライダーを作成するライブラリは沢山ありますが、その中の一つであるSwiper.jsはjQueryを使わずに実装できるのが魅力のひとつです。 当記事ではSwiper.jsをReactで使う方法について記します。※Reac […]

【Swiper】ネストスライダーを作成する

当記事では、Swiper.jsを使用してスライダーが入れ子になったネストスライダーを作成する方法とその注意点についてデモ付きで記します。 通常のSwiper.jsでのスライダーの作成はご存じの前提で進めさせていただきます […]

【Swiper】フェードスライダーを作成する

fade slider

swiper.jsのエフェクトオプションを使用してスライドがふわっと切り替わるフェードスライダーを作成する方法を記します。 通常のSwiper.jsでのスライダーの作成はご存じの前提で進めさせていただきますので、Swip […]

【Swiper】スライダーのアクセシビリティを向上させる

swiper_accessibility

Javascriptのスライダーライブラリの中でも人気がある『swiper.js』はオプションがとても豊富です。当記事ではswiper.jsのオプションを使用してスライダーのアクセシビリティ(操作性)を向上させる方法につ […]

Swiperスライダーの矢印のサイズや位置や色を変更する

swiper arrows size position color

Swiper.jsで作成したスライダーのナビゲーション(矢印)のサイズや位置や色を変更したい時があると思います。当記事ではその方法をデモを交えながら解説します。 通常のSwiper.jsでのスライダーの作成はご存じの前提 […]

Swiperスライダーのデモ19選

Swiper.jsを使用して作成できるスライダーのサンプル19選をデモ付きでご紹介します。また、それぞれのスライダーの作成方法を記した記事のリンクも載せておきます。 ①ノーマルなスライダー まずは特にカスタマイズしていな […]