【jQuery】スライダーを自作する

プログラマーのYoheiです。

jQueryを使ったカルーセルスライダーの作り方をお教えします。

HTML

CSS

jQuery

☑CSS
padding 〇〇%は、画像の縦幅÷横幅のアスペクト比です。

☑jQuery
画像をスライドする毎に1を足していく仕組みで、最大値(このスライドショーでは3)を超えた時、最小値(1)に戻るようにしてループさせています。

フリック対応にしたい場合は、お好みでtouchmoveイベントを追加してください。

jQueryを一から始めるなら！

✅本気でプログラミングがしたい方へ！
(mybest様から引用)
「プログラミングにオススメのパソコン」
タイプ:ノートパソコン
CPU:Core i5・Ryzen 5以上
メモリ:8GB～16GB
ストレージ:256GB以上
画面サイズ:13インチ以上
解像度:2256×1504 Pixels(アスペクト比 3:2)
バッテリー駆動時間:15時間以上