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

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

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

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

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

背景画像をフェードで切り替えて、さらにページネーションも使えるスライダーを紹介します。jQueryを使わず単体で動作します。 デモページ 前提条件は以下 jQueryは使わないページネーションとナビゲ...

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