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

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

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

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

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

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

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

<div id="stage">

    <input type="radio" id="back1" name="gal">

    <input type="radio" id="back2" name="gal">

    <input type="radio" id="back3" name="gal">

    <input type="radio" id="back4" name="gal">

    <input type="radio" id="back5" name="gal">

    <input type="radio" id="next1" name="gal">

    <input type="radio" id="next2" name="gal">

    <input type="radio" id="next3" name="gal">

    <input type="radio" id="next4" name="gal">

    <input type="radio" id="next5" name="gal">

  <div id="photos">

      <div id="photo0" class="pic"><img src="https://lh3.googleusercontent.com/d/1Nvgzl_EC-MsmlR4yKLIThY2M4H_Mt-_b">

      </div>

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

    <label for="back1"><div id="left1" class="b_left"><span>＜</span></div></label> 

    <label for="next1"><div id="right1" class="b_right"><span>＞</span></div></label>

      </div>

      <div id="photo2" class="pic"><img src="https://lh3.googleusercontent.com/d/13WhVN4TEcnvkvcqyDE1f7T7VMwpHNPbP">

    <label for="back2"><div id="left2" class="b_left"><span>＜</span></div></label>

     <label for="next2"><div id="right2" class="b_right"><span>＞</span></div></label>

      </div>

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

    <label for="back3"><div id="left3" class="b_left"><span>＜</span></div></label>

     <label for="next3"><div id="right3" class="b_right"><span>＞</span></div></label>        

      </div>

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

     <label for="back4"><div id="left4" class="b_left"><span>＜</span></div></label>

     <label for="next4"><div id="right4" class="b_right"><span>＞</span></div></label>

      </div>

      <div id="photo5" class="pic"><img src="https://lh3.googleusercontent.com/d/1Nvgzl_EC-MsmlR4yKLIThY2M4H_Mt-_b">

     <label for="back5"><div id="left5" class="b_left"><span>＜</span></div></label>

     <label for="next5"><div id="right5" class="b_right"><span>＞</span></div></label>

      </div>

      <div id="photo6" class="pic"><img src="https://lh3.googleusercontent.com/d/15lPwDOqpwYzOva_32qvYZ4wpaKYYEuQQ">

      </div>

    </div>

<div style="padding:16%;"></div>

</div>

<style type="text/css">

/* 表示画面 */

#stage {

position: relative;

width: 100%;

margin: 0 auto;

overflow: hidden;

}

/*全ての写真を水平一列に格納したdiv、#photosに,

スライドショーの animation を設定*/

#photos {

position:absolute;

top:0;

width:100%;

animation: imgPassToLeft0 30s infinite;

-webkit-animation: imgPassToLeft0 30s infinite;

}

/*各写真の並び位置を設定

#photo1, #photo2, #photo3, #photo4, #photo5 */

#photo0 { left:  0%; }

#photo1 { left:100%; } 

#photo2 { left:200%; }

#photo3 { left:300%; }

#photo4 { left:400%; }

#photo5 { left:500%; }

#photo6 { left:600%; }

.pic { position:absolute;top:0;width:100%; }

/*写真サイズを可変に*/

.pic img { width:100%; }

/* 全てのラジオボタンを非表示に */

#back1,#back2,#back3,#back4,#back5,#next1,#next2,#next3,#next4,#next5{

display: none;

}

/*送りボタン文字（＜、＞）の設定*/

.b_left span, .b_right span {

position: absolute;

font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;

font-size: 42px;

font-weight: bold;

opacity:0;

top: 40%;

color:#EEE;

}

.b_left span {

left: 5%;;

}

.b_right span {

left: 90%;

}

/*ボタン文字hover時の設定*/

.pic:hover > label div span {

opacity:1;

color:#EEE;

}

.pic label div span:hover {

color:#f00;

cursor:pointer;

}

/* 各送りボタンクリック時のanimation設定 */

#next1:checked ~ #photos {

animation: imgPassToLeft1 30s infinite;

animation-delay: -4.8s;

-webkit-animation: imgPassToLeft1 30s infinite;

-webkit-animation-delay: -4.8s;

}

#next2:checked ~ #photos {

animation: imgPassToLeft2 30s infinite;

animation-delay: -10.8s;

-webkit-animation: imgPassToLeft2 30s infinite;

-webkit-animation-delay: -10.8s;

}

#next3:checked ~ #photos {

animation: imgPassToLeft3 30s infinite;

animation-delay: -16.8s;

-webkit-animation: imgPassToLeft3 30s infinite;

-webkit-animation-delay: -16.8s;

}

#next4:checked ~ #photos {

animation: imgPassToLeft4 30s infinite;

animation-delay: -22.8s;

-webkit-animation: imgPassToLeft4 30s infinite;

-webkit-animation-delay: -22.8s;

}

#next5:checked ~ #photos {

animation: imgPassToLeft5 30s infinite;

animation-delay: -28.8s;

-webkit-animation: imgPassToLeft5 30s infinite;

-webkit-animation-delay: -28.8s;

}

#back1:checked ~ #photos {

animation: toRight1 6s 0s forwards, imgPassToRight1 30s 6s infinite;

}

#back2:checked ~ #photos {

animation: toRight2 6s 0s forwards, imgPassToRight2 30s 6s infinite;

}

#back3:checked ~ #photos {

animation: toRight3 6s 0s forwards, imgPassToRight3 30s 6s infinite;

}

#back4:checked ~ #photos {

animation: toRight4 6s 0s forwards, imgPassToRight4 30s 6s infinite;

}

#back5:checked ~ #photos {

animation: toRight5 6s 0s forwards, imgPassToRight5 30s 6s infinite;

}

/* animation設定 */

@keyframes imgPassToLeft0 {

0%  { left:-100%; }

16% { left:-100%; }

20% { left:-200%; }

36% { left:-200%; }

40% { left:-300%; }

56% { left:-300%; }

60% { left:-400%; }

76% { left:-400%; }

80% { left:-500%; }

96% { left:-500%; }

100% { left:-600%; }

}

@-webkit-keyframes imgPassToLeft0 {

0%  { left:-100%; }

16% { left:-100%; }

20% { left:-200%; }

36% { left:-200%; }

40% { left:-300%; }

56% { left:-300%; }

60% { left:-400%; }

76% { left:-400%; }

80% { left:-500%; }

96% { left:-500%; }

100% { left:-600%; }

}

@keyframes imgPassToLeft1 {

0% { left:-100%; }

16% { left:-100%; }

20% { left:-200%; }

36% { left:-200%; }

40% { left:-300%; }

56% { left:-300%; }

60% { left:-400%; }

76% { left:-400%; }

80% { left:-500%; }

96% { left:-500%; }

100% { left:-600%; }

}

@-webkit-keyframes imgPassToLeft1 {

0% { left:-100%; }

16% { left:-100%; }

20% { left:-200%; }

36% { left:-200%; }

40% { left:-300%; }

56% { left:-300%; }

60% { left:-400%; }

76% { left:-400%; }

80% { left:-500%; }

96% { left:-500%; }

100% { left:-600%; }

}

@keyframes imgPassToLeft2 {

0% { left:-100%; }

16% { left:-100%; }

20% { left:-200%; }

36% { left:-200%; }

40% { left:-300%; }

56% { left:-300%; }

60% { left:-400%; }

76% { left:-400%; }

80% { left:-500%; }

96% { left:-500%; }

100% { left:-600%; }

}

@keyframes imgPassToLeft3 {

0% { left:-100%; }

16% { left:-100%; }

20% { left:-200%; }

36% { left:-200%; }

40% { left:-300%; }

56% { left:-300%; }

60% { left:-400%; }

76% { left:-400%; }

80% { left:-500%; }

96% { left:-500%; }

100% { left:-600%; }

}

@keyframes imgPassToLeft4 {

0% { left:-100%; }

16% { left:-100%; }

20% { left:-200%; }

36% { left:-200%; }

40% { left:-300%; }

56% { left:-300%; }

60% { left:-400%; }

76% { left:-400%; }

80% { left:-500%; }

96% { left:-500%; }

100% { left:-600%; }

}

@keyframes imgPassToLeft5 {

0% { left:-100%; }

16% { left:-100%; }

20% { left:-200%; }

36% { left:-200%; }

40% { left:-300%; }

56% { left:-300%; }

60% { left:-400%; }

76% { left:-400%; }

80% { left:-500%; }

96% { left:-500%; }

100% { left:-600%; }

}

@keyframes imgPassToRight1 {

0% { left: 0%; }

4% { left: -100%; }

20% { left:-100%; }

24% { left:-200%; }

40% { left:-200%; }

44% { left:-300%; }

60% { left:-300%; }

64% { left:-400%; }

80% { left:-400%; }

84% { left:-500%; }

100% { left:-500%; }

}

@keyframes imgPassToRight2 {

0% { left: -100%; }

4% { left: -200%; }

20% { left:-200%; }

24% { left:-300%; }

40% { left:-300%; }

44% { left:-400%; }

60% { left:-400%; }

64% { left:-500%; }

80% { left:-500%; }

83.999% { left:-600%; }

84% { left:-100%; }

100% { left:-100%; }

}

@keyframes imgPassToRight3 {

0% { left: -200%; }

4% { left: -300%; }

20% { left:-300%; }

24% { left:-400%; }

40% { left:-400%; }

44% { left:-500%; }

60% { left:-500%; }

63.999% { left:-600%; }

64% { left:-100%; }

80% { left:-100%; }

84% { left:-200%; }

100% { left:-200%; }

}

@keyframes imgPassToRight4 {

0% { left: -300%; }

4% { left: -400%; }

20% { left:-400%; }

24% { left:-500%; }

40% { left:-500%; }

43.999% { left:-600%; }

44% { left:-100%; }

60% { left:-100%; }

64% { left:-200%; }

80% { left:-200%; }

84% { left:-300%; }

100% { left:-300%; }

}

@keyframes imgPassToRight5 {

0% { left: -400%; }

4% { left: -500%; }

20% { left:-500%; }

23.999% { left:-600%; }

24% { left:-100%; }

40% { left:-100%; }

44% { left:-200%; }

60% { left:-200%; }

64% { left:-300%; }

80% { left:-300%; }

84% { left:-400%; }

100% { left:-400%; }

}

@keyframes toRight1 {

0% { left:-100%; }

19.999% { left:0%; }

20% { left: -500%; }

100% { left:-500%; display:none;}

}

@keyframes toRight2 {

0% { left:-200%; }

20% { left: -100%; }

100% { left:-100%; display:none;}

}

@keyframes toRight3 {

0% { left:-300%; }

20% { left: -200%; }

100% { left:-200%; display:none;}

}

@keyframes toRight4 {

0% { left:-400%; }

20% { left: -300%; }

100% { left: -300%; display:none;}

}

@keyframes toRight5 {

0% { left:-500%; }

20% { left: -400%; }

100% { left: -400%; display:none;}

}

</style>