• Image 01

  re·lax·a·tion

• Image 02

  qui·e·tude

• Image 03

  bal·ance

• Image 04

  e·qua·nim·i·ty

• Image 05

  com·po·sure

• Image 06

  se·ren·i·ty

CSS3 Fullscreen Slideshow

A CSS-only slideshow for background images

http://tympanus.net/codrops/に掲載されている、jQueryを使用しないCSS3フルスクリーンスライドショーのテストページです。

Demo 1
Demo 2
Demo 3
Demo 4

Download sourceをクリックして、CSS3FullscreenSlideshow.zipをダウンロード。

解凍（展開）したCSS3FullscreenSlideshowフォルダをそのまま任意のフォルダにアップロードします。

背景画像のフルスクリーンだけではなく、部分的に表示することも可能です。

.cb-slideshow,
.cb-slideshow:after { 
    position: fixed;
    width: 100%;
    height: 100%;
    top: 0px;
    left: 0px;
    z-index: -1; 
}

を、次の例のように、positionプロパティをrelativeにして、要素の高さと幅を任意の値にすることで、この記事のように表示することが出来ます。

.cb-slideshow,
.cb-slideshow:after { 
    position: relative;
    width: 590px;
    height: 392px;
    top: 0px;
    left: 0px;
    z-index: -1; 
}

なお、既存のテーマやテンプレートに組み込む場合、z-indexプロパティを適切に設定することが必要な場合があります。