Google Sites にCSSでスライダー

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://drive.google.com/uc?export=view&id=1Nvgzl_EC-MsmlR4yKLIThY2M4H_Mt-_b">
      </div>
      <div id="photo1" class="pic"><img src="https://drive.google.com/uc?export=view&id=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://drive.google.com/uc?export=view&id=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://drive.google.com/uc?export=view&id=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://drive.google.com/uc?export=view&id=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://drive.google.com/uc?export=view&id=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://drive.google.com/uc?export=view&id=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>