GoogleSitesにスライドショーを、HTMLとCSSの記述のみで埋め込む方法について以下に説明します。

準備するスライド：600✕338pxの画像5枚を、google drive にアップロードしておく

GoogleSitesでの作成方法:（GoogleSitesでサイトが登録されているものとします）

・ページの挿入したいところで、挿入カラムの上部にある、「＜＞埋め込む 」をクリックし、ポップアップするウインドウで「埋め込みコード」タブの中に、下記のHTML、CSSを書き込み（CSSは以下の記載コードのように、<style type="text/css"> </css> の中に書き込みます）、スライドショーを挿入します。

・なお、HTMLの <img src="https://drive.google.com/uc?export=view&id=1TgAIQRKzyMjtdqIJMLw4x0YT_tux8x68"> の id は、google drive でアップロードしておいた画像の共有リンクを取得すると得られる id です。

・ページに表示される画像をクリックすると、表示枠が現れるので、横に拡大させて表示位置を好みで調節する。

本サンプル表示埋め込み用HTML/CSS

<div id="stage">

      <div id="photo1" class="pic"><img src="https://lh3.googleusercontent.com/d/1TgAIQRKzyMjtdqIJMLw4x0YT_tux8x68"></div>

      <div id="photo2" class="pic"><img src="https://lh3.googleusercontent.com/d/1YoR3QmPk9A2Os-b_UQjxEUuQaK_LpvZG"></div>

      <div id="photo3" class="pic"><img src="https://lh3.googleusercontent.com/d/1g_74y6XYN5L5g8iaHmfwEPK-xg8xcBSM"></div>

      <div id="photo4" class="pic"><img src="https://lh3.googleusercontent.com/d/1_c5iH6INpPCssBnbNkZ0xUmS_QwIhs4-"></div>

      <div id="photo5" class="pic"><img src="https://lh3.googleusercontent.com/d/1vdzQlxBQjZA_Fwby-0XDjynngs8wx5Ex"></div>

<!--<div style="padding:28%;"></div>-->

</div>

<style type="text/css">

#stage {

position: relative;

max-width:600px;

margin: 0 auto;

background:#ddd;

}

.pic {

position: absolute;

}

.pic img {

width: 100%;

height: auto;

opacity:0;

-moz-animation: imgTrans 40s infinite;

-webkit-animation: imgTrans 40s ease-in infinite;

animation: imgTrans 40s infinite;

}

#photo1 img {

-moz-animation-delay: 0s;

-webkit-animation-delay: 0s;

animation-delay: 0s;

}

#photo2 img {

-moz-animation-delay: 8s;

-webkit-animation-delay: 8s;

animation-delay: 8s;

}

#photo3 img {

-moz-animation-delay: 16s;

-webkit-animation-delay: 16s;

animation-delay: 16s;

}

#photo4 img{

-moz-animation-delay: 24s;

-webkit-animation-delay: 24s;

animation-delay: 24s;

}

#photo5 img {

-moz-animation-delay: 32s;

-webkit-animation-delay: 32s;

animation-delay: 32s;

}

@-webkit-keyframes imgTrans {

0% { opacity:0; }

7% { opacity:1; }

18% { opacity:1; }

25% { opacity:0; }

100% { opacity:0; }

}

@-moz-keyframes imgTrans {

0% { opacity:0; }

7% { opacity:1; }

18% { opacity:1; }

25% { opacity:0; }

100% { opacity:0; }

}

@keyframes imgTrans {

0% { opacity:0; }

7% { opacity:1; }

18% { opacity:1; }

25% { opacity:0; }

100% { opacity:0; }

}

</style>