スライドショー(3) CDN,Googleフォト

Swiperが4になったので、、、CDN + Googleフォト

Swiper
CDN

スライド画像を用意、サイズを揃えて、Gooleフォトに入れておく。
Bloggerで、[画像を挿入] - [携帯電話]として、Gooleフォト、画像を選択、とりあえず貼り付ける。
[HTML]編集で、画像の 'src="https://2.bp.blogspot.com/xxxxx.jpeg" 'の部分を取り出し、
Swiperの画像ファイルに差し替える。

 <link href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.0.7/css/swiper.min.css" rel="stylesheet"></link>  
 <script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.0.7/js/swiper.min.js"></script>  
 <div class="swiper-container">  
 <div class="swiper-wrapper">  
 <div class="swiper-slide"><img class="sp-image" src="https://2.bp.blogspot.com/xxxxx2437.jpeg" /></div>  
 <div class="swiper-slide"><img class="sp-image" src="https://1.bp.blogspot.com/xxxxx5011.jpeg" /></div>  
 <div class="swiper-slide"><img class="sp-image" src="https://1.bp.blogspot.com/xxxxx7014.jpeg" /></div>  
 </div>  
 </div>  
 <script>  
 var swiper = new Swiper('.swiper-container', {  
 speed: 2500, loop: true,
 effect: 'fade',  fadeEffect: { crossFade: true },  
 // effect: 'slide',
 // effect: 'coverflow',
 // effect: 'flip',
 // effect: 'cube',   cubeEffect: { slideShadows: false, shadow: false },
 autoplay: { delay: 2000, disableOnInteraction: false, },  
 });  
 </script>