Blogger + Dropbox でスライドショー

元ネタ:bchanx/slidr

https://github.com/bchanx/slidr
こちらから、「slidr.min.js」をダウンロード。
Dropboxにコピー。URL取得。

スライドの画像をDropboxにコピー。URL取得。

下記コードをBlogger、HTMLに貼り付け、編集。

 <script src="https://www.dropbox.com/s/xxxxx/slidr.min.js?dl=1" type="text/javascript"></script>  
   
 <div id="slidr-img" style="display: block; width: 550px; height: 265px; margin-left: auto; margin-right: auto;">  
 <img data-slidr="1" src="https://www.dropbox.com/s/xxxxx/100.png?dl=1" />  
  <img data-slidr="2" src="https://www.dropbox.com/s/xxxxx/101.png?dl=1" />  
  <img data-slidr="3" src="https://www.dropbox.com/s/xxxxx/102.png?dl=1" />  
  <img data-slidr="4" src="https://www.dropbox.com/s/xxxxx/103.png?dl=1" />
 </div>  
 <script>  
 slidr.create('slidr-img', {  
  breadcrumbs: false,  
  controls: 'none',  
  direction: 'h',  
  fade: true,  
  keyboard: true,  
  overflow: true,  
  pause: false,  
  theme: '#222',  
  timing: { 'fade': '1s ease-in' },  
  touch: true,  
  transition: 'fade'  
 }).add('h', ['1', '2', '3', '4','1']).auto(4000);  
 </script>  
   

赤字は、dropboxにファイル設置後、書きなおしてください。
「transition: 'fade'」は、スマホ表示できるけど、他は要検証。