当記事ではswiper.jsのエフェクトオプションを使用して立体的な3Dキューブスライダーを作成する方法を記します。また、cubeEffectで細かい調整を行う方法についても説明します。 通常のSwiper.jsでのスラ […]
Javascript
【Swiper】lazyオプションを使用して遅延読み込みする
当記事ではswiper.jsのlazyオプションを使用してSwiperスライダーを遅延読み込みする方法について記します。 通常のSwiper.jsでのスライダーの作成はご存じの前提で進めさせていただきますので、Swipe […]
【Swiper】グリッドスライダーの作り方
当記事ではswiper.jsを使用して、スライドが複数列複数行のグリッドスライダーを作成する方法を記します。 通常のSwiper.jsでのスライダーの作成はご存じの前提で進めさせていただきますので、Swiper.jsを初 […]
Swiper.jsのページネーションのすべて
swiper.jsのページネーションはとても充実しており、オプションを変更するだけで様々なページネーションを作成できます。(一部どうしてもCSSの必要あり)当記事では様々なSwiperページネーションとその実装方法をデモ […]
【Swiper】縦方向に動くスライダーを作成して見た目を整える
当記事ではswiper.jsを使用して、縦方向に動くスライダーを作成する方法を記します。また、ナビゲーションとページネーションを縦向きにする方法についても記します。 通常のSwiper.jsでのスライダーの作成はご存じの […]
【Swiper】自動で流れ続ける無限ループスライダーを作成する
当記事ではswiper.jsを使用して、自動で流れ続ける無限ループスライダーを作成する方法について記します。 通常のSwiper.jsでのスライダーの作成はご存じの前提で進めさせていただきますので、Swiper.jsを初 […]
【Swiper】ダブルスライダーを作成する【連動】
swiper.jsを使用して、メインのスライドとテキストのスライドが連動して動くダブルスライダーを作成する方法について記します。 通常のSwiper.jsでのスライダーの作成はご存じの前提で進めさせていただきますので、S […]
【Swiper】両サイドが見切れたスライダーを作成する方法
当記事ではswiper.jsを使用して両サイドが見切れたスライダーを作成する方法を記します。swiperのオプションだけで実現可能です。 通常のSwiper.jsでのスライダーの作成はご存じの前提で進めさせていただきます […]
【Swiper】サムネイル付きのスライダーを作成する
当記事ではサムネイル付きのスライダーをswiper.jsを使用して作成する方法についてデモ付きで解説します。swiper.jsのオプションを使用して二つのスライダーを連動させることで実現します。 通常のSwiper.js […]
Swiperスライダーの矢印とドットを外に出す方法
Swiperスライダーのナビゲーション(矢印)とページネーション(ドット)をスライドの外に配置したい時があると思います。当記事ではその方法をデモを交えながら解説します。 通常のSwiper.jsでのスライダーの作成はご存 […]