今回は、丸いめんこのようなイメージ画像をひっくり返しながらクルクル切り替えるスライドショーを紹介します。(めんこといっても若い人にはわからないかもしれませんが、他に良い例えが浮かばなかったので。)

では、サンプルを作ってみましたのでご覧下さい。

『Flipping Circle Slideshow』サンプル

最近はこのようなサークルのカタチが流行っているようですね。設置も簡単ですので、活用してみて下さい。


まずはこちらの『Flipping Circle Slideshow』のサイトから、ソースを一式ダウンロードします。

<head>部分にCSSを記述します。

続いて、</body>の直前にJavaScriptの設置をして、準備完了です。

<body>部分の任意の場所に、以下のように表示させたい画像とテキストを指定して完成です。

※ 使用する画像は幅400px x 高さ400pxとなっています。

サンプルのソースをかいておきます。どうぞご参考まで。

この記事と関連してると思われる記事: