MENU
東大阪 | ホームページ制作 | チラシ・サムネイル・バナー制作

[CSSだけで作る！]簡単スライダー！

CSS
目次

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 で繰り返し
CSS
css.logo

この記事が気に入ったら
フォローしてね！

よかったらシェアしてね！
  • URLをコピーしました！

－広告－

国内WordPressテーマ シェア率 No.1

Web制作案件にも使いやすい WordPress テーマ

SWELL

シンプルで多機能、そしてカスタマイズしやすい

ダッシュボードやカスタマイズ画面に沢山の設定が追加されていて、ノーコードでも相当なカスタマイズが可能。
追加CSS、追加JavaScript をページ毎に入力欄があるので、細部までこだわったサイト制作が可能。

買い切り型で、複数サイトに使用可能、Web制作案件にも

一度購入すれば、いくつのサイトに使用してもOK。フリーランスのWeb制作案件にも使えます。
メンバー登録すればテーマ更新も無償。

  • 一度買えば、月額料金はなし
  • 複数サイトで使用可能
  • ノーコードでも調整できる設定が、ダッシュボードやカスタマイズ画面に大量追加
  • ブロックエディタの豊富な追加ブロックで投稿がリッチに
  • 細部の調整が、「追加CSS と 追加JavaScript」 で簡単に出来る
  • 他の人気テーマ からの乗り換え対応プラグイン配布( cocoon, ADDINGER, JIN, SANGO, STORK, THE THOR)
SWELLをもっと詳しく知る

この記事を書いた人

bobuのアバター bobu Webクリエイター

ホームページ制作、リメイク、バナー、画像制作を行っています。
毎朝5:00-7:00 まで朝活で ITの知識を インプット+ Twitter へアウトプット。
お仕事のご依頼は「お問い合わせページ」からご連絡ください。

関連記事

目次