フェード切替スライダー のコード

スライドせず、その場でふんわり重ねて切り替わるフェード(クロスフェード)型です。ヒーロー画像やトップのメインビジュアルに向いています。フェードは表示枚数1枚が前提です。

Swiperでの動作プレビューです。画像はサンプル(Unsplash)です。微調整は ジェネレーター本体 でどうぞ。

コピペ用コード(3ライブラリ)

サンプル画像(Unsplash)の <img src> をご自身の画像に置き換えてください。

Swiper


        

Splide


        

Slick(jQuery・非推奨)


        
⚠️ SlickはjQuery必須で更新が停止しています。新規実装ではSwiper/Splideをおすすめします。

よくある質問

フェード切替スライダーは Swiper・Splide・Slick の3ライブラリに対応していますか?

はい。フェード切替スライダーのコードを Swiper・Splide・Slick の3つで掲載しています。コピーしてそのまま使えます。

このコードは無料で使えますか?商用利用できますか?

はい。無料・登録不要で、掲載しているコードはそのまま商用利用できます。

関連パターン・ツール