【Swiper】ダブルスライダーを作成する【連動】

double_slider

swiper.jsを使用して、メインのスライドとテキストのスライドが連動して動くダブルスライダーを作成する方法について記します。 通常のSwiper.jsでのスライダーの作成はご存じの前提で進めさせていただきますので、S […]

【Swiper】両サイドが見切れたスライダーを作成する方法

swiper_show_both_sides

当記事ではswiper.jsを使用して両サイドが見切れたスライダーを作成する方法を記します。swiperのオプションだけで実現可能です。 通常のSwiper.jsでのスライダーの作成はご存じの前提で進めさせていただきます […]

【Swiper】サムネイル付きのスライダーを作成する

thumbnail slider

当記事ではサムネイル付きのスライダーをswiper.jsを使用して作成する方法についてデモ付きで解説します。swiper.jsのオプションを使用して二つのスライダーを連動させることで実現します。 通常のSwiper.js […]

Swiperスライダーの矢印とドットを外に出す方法

Swiper slider

Swiperスライダーのナビゲーション(矢印)とページネーション(ドット)をスライドの外に配置したい時があると思います。当記事ではその方法をデモを交えながら解説します。 通常のSwiper.jsでのスライダーの作成はご存 […]

swiper.jsをCDNで読み込む

swiper cdn

Swiperスライダーを作成するswiper.jsのCDNを載せています。CDNを使用するすれば、ライブラリをダウンロードせずにSwiperスライダーの作成ができます。CSSも載せているので見た目も整えてくれます。 上記 […]

【Swiper】ページネーション(ドット)を任意の画像でカスタマイズする

swiper pagination customize

Swiper.jsで作成したスライダーのページネーション(ドット)を任意の画像でカスタマイズしたい時があると思います。当記事ではその方法をデモを交えながら解説します。 通常のSwiper.jsでのスライダーの作成はご存じ […]

【Swiper】ナビゲーション(矢印)を任意の画像でカスタマイズする方法

swiper arrow customize

Swiper.jsで作成したスライダーのナビゲーション(矢印)を任意の画像でカスタマイズする方法についてデモを交えながら解説します。 通常のSwiper.jsでのスライダーの作成はご存じの前提で進めさせていただきますので […]

Swiper.jsでシンプルなスライダーを実装する

swiper slider

スライダーを作成するライブラリは沢山ありますが、その中の一つであるswiper.jsはjQueryを使わずに実装できるのが魅力のひとつです。 当記事ではswiper.jsを使用したスライダーの実装方法を記します。 ①必要 […]