スライダーを手軽に実装できるSwiperですが、ドット（ページネーション）をマウスでクリックすると、たまに違うドットに飛んでしまうことがあります。今回はその原因と解決方法について説明します。 前提条件...

今回はAdvanced Custom Fields（以下、ACF）を使って、スライダーに使う画像をPC表示とSP表示で切り替える方法を紹介します。 前提条件は以下 Advanced Custom Fi...

今回はSwiperスライダーを使って、バラバラの画像サイズを上下中央に揃える方法を紹介します。縦向きと横向きの画像を一緒にスライダーさせたいときなど、画像の横幅や高さが違う場合にオススメの実装方法です...

今回はSwiper.jsを使ってパララックスするスライダーの実装方法を紹介します。奥行きのあるスライダーを実装したい方にオススメです。 ・デモサイト 実装内容は以下。 Swiperの４系を使用（IE対...

今回は背景画像をズームアップさせながらフェードで切り替えるスライダーを、Swiperを使って実装します。Swiperなどのプラグインを使わなくても実現できますが、ページネションの設定や１ページに複数ス...

背景画像をフェードで切り替えて、さらにページネーションも使えるスライダーを紹介します。背景画像を全画面で表示したいときに便利なスライダーです。jQueryを使わず単体で動作します。 ※今回はswipe...

ズーム系スライダーを実装する方法はいくつかありますが、今回はjQueryを使って手軽に実装できるZoom Sliderを紹介します。 ※2019/12/5追記ズーム系のスライダーならSwiperを使っ...