CSSだけで作成、シンプルなコードでグラフィカルな画像ギャラリーを作るコード 『CSS/HTML Only Carousel』

WS002449
このエントリーをはてなブックマークに追加
PR

CSS/HTML Only Carousel
By Alex Bergin 

DEMO 表示

CSSだけで作られた画像ギャラリー3

左右に表示されるサムネイルをクリックすることで、隣の画像を大きく中央に表示させる画像ギャラリーです
CSSだけで作られており、さらにコードもとてもシンプルです

inputのradioボタンを使って、選択中のものそうでないものをうまく表示仕分けています

 

HTML部分

<input name="a" type="radio" checked="checked" style="background-image: url(http://placekitten.com/800/600)">
<input name="a" type="radio" style="background-image: url(http://placekitten.com/900/600)">
<input name="a" type="radio" style="background-image: url(http://placekitten.com/700/600)">
<input name="a" type="radio" style="background-image: url(http://placekitten.com/900/700)">
<input name="a" type="radio" style="background-image: url(http://placekitten.com/800/700)">

inputで背景にCSSで画像を呼び出しているだけです
個数を増やすだけでそのまま、画像の数を増やしていけます

 

CSS部分

html , body {
    overflow: hidden;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    padding: 0;
    margin: 0;
    background-color: black;
}

input {
    background-color: black;
    width: 600px;
    height: 400px;
    display: inline-block;
    font-family: sans-serif;
    position: absolute;
    top: 50%;
    left: 50%;
    margin-top: -200px;
    margin-left: -300px;
    -webkit-transition: all 0.5s ease;
    -mos-transition: all 0.5s ease;
    -ms-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    transition: all 0.5s ease;
    -webkit-transform: translate( -80% , 0 ) scale( 0.5 );
    -moz-transform: translate( -80% , 0 ) scale( 0.5 );
    -ms-transform: translate( -80% , 0 ) scale( 0.5 );
    -o-transform: translate( -80% , 0 ) scale( 0.5 );
    transform: translate( -80% , 0 ) scale( 0.5 );
    background-size: cover;
    background-position: center center;
    cursor: pointer;
    outline: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    z-index: 1;
}

input:checked {
    -webkit-transform: translate( 0 , 0 ) scale( 1 );
    -moz-transform: translate( 0 , 0 ) scale( 1 );
    -ms-transform: translate( 0 , 0 ) scale( 1 );
    -o-transform: translate( 0 , 0 ) scale( 1 );
    transform: translate( 0 , 0 ) scale( 1 );
    opacity: 1;
    z-index: 3;
}

input:checked + input {
    z-index: 2;
}

input:checked ~ input {
    -webkit-transform: translate( 80% , 0 ) scale( 0.5 );
    -moz-transform: translate( 80% , 0 ) scale( 0.5 );
    -ms-transform: translate( 80% , 0 ) scale( 0.5 );
    -o-transform: translate( 80% , 0 ) scale( 0.5 );
    transform: translate( 80% , 0 ) scale( 0.5 );
}

画像の初期値はすべて左に小さく表示されるようにして
チェックが付いているものを中央に、チェックが付いているもの以下のコードは右側に表示させるようになっているのが CSSを見ると分かりますね

右側にある画像の重なりの順番は +(プラス)をつかってチェックの付いたinputの直後のinputにが最善に来るようにz-indexで表示の重なりの順位をあげています

左側に表示されるものには特別な対応は必要なくて、HTMLの要素の順番通りに表示されればいいので

 

ラベルを付けて サムネイル表示と、サムネイルからの操作を出来るように機能を足してみました

DEMO 表示

CSSだけで作られた画像ギャラリー6

ラベルに画像を表示させれば、それで操作ができるので
サムネイル表示させて、さらにサムネイルをクリックでも操作出来るように 機能をプラスしてみました

 

HTMLはこのようにしました

<input id="i001" name="a" type="radio" checked="checked" style="background-image: url(http://placekitten.com/800/600)">
<input id="i002" name="a" type="radio" style="background-image: url(http://placekitten.com/900/600)">
<input id="i003" name="a" type="radio" style="background-image: url(http://placekitten.com/700/600)">
<input id="i004" name="a" type="radio" style="background-image: url(http://placekitten.com/900/700)">
<input id="i005" name="a" type="radio" style="background-image: url(http://placekitten.com/800/700)">

<div>
	<label for="i001"><img src="http://placekitten.com/800/600"></label>
	<label for="i002"><img src="http://placekitten.com/900/600"></label>
	<label for="i003"><img src="http://placekitten.com/700/600"></label>
	<label for="i004"><img src="http://placekitten.com/900/700"></label>
	<label for="i005"><img src="http://placekitten.com/800/700"></label>
</div>

inputとlabelを連動させました
inputにidをつけて、labelにはforで対応するid名を入れることで labelのクリックでinputの操作が出来るように

 

CSSはこれを追加しただけ

div {
	position: absolute;
	bottom: 20px;
	width: 100%;
	text-align: center;
}

div label img {
	height: 100px;
	width: auto;
	margin: 0 5px;
}

あとはCSSで打倒な位置にサムネイルを表示させているだけです
divで囲って横幅を作ってやって(今回は横幅100%) text-align:center;とするだけでdiv内で中央に整列できるので、あとはサムネイル画像の高さを100pxに統一することで見栄えを整えました

PR

COMMENT

コメントを残す

PR

9ineBBの管理人が運営するサイト

WDG WEB DESIGN GALLERY ウェブデザインギャラリー CC0 PHOTO 無料で使える高画質な写真をダウンロード、クレジット表記、リンク不要

9ineBBの最新情報をチェック・購読

Twitter Facebook Google+ Feedly RSS

どこをクリックしてもこの表示を消せます
(3日後以降に再度表示されます)