基本のスライダー のコード

1枚ずつ切り替わる、矢印とページネーション(ドット)付きの最も基本的なスライダーです。まず迷ったらこの形から始めるのがおすすめです。

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

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

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

Swiper


        

Splide


        

Slick(jQuery・非推奨)


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

よくある質問

基本のスライダーは Swiper・Splide・Slick の3ライブラリに対応していますか?

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

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

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

関連パターン・ツール