JQuery を使わず少ない記述でスライダーを作る
See the Pen Untitled by ぼぶ@朝活input中 (@bobu_6326) on CodePen.
解説
- .slider の要素の中を .content を 右から左に通り過ぎていくように設定。
- .slider の枠から飛び出すと 表示されなくなるように設定。
- 最初の画像以外は left を使い .slider の枠の外に出しておく
- animation を使い、画像が通り過ぎる動きを繰り返させる
CSS
.slider
- 要素の枠を作り、はみ出たら表示されないように overflow:hidden;
- animation は left で操作するので親要素に position: relative;
.content
- left で操作するので position: absolute; を付与
- animation は [アニメーション名] [動きが完了するまでの秒数] [繰り返し回数] を入力、infinite で繰り返し