Blogger + Dropbox でスライドショー(2)

スライドショー

前回のは、 レスポンシブでないので、再考。
jscript不要。

Swiper
http://www.idangero.us/swiper/

 <style>  
 .swiper-container {  
width: 100%;
max-width: 500px;
height: 100%;
margin: 20px auto;
   }  
   .swiper-slide {  
     background-position: center;  
     background-size: cover;  
   }  
   </style>  
   
 <link href="https://dl.dropboxusercontent.com/s/xxxxx/swiper.css" rel="stylesheet"></link>  
 <br />  
 <div class="swiper-container">  
 <div class="swiper-wrapper">  
 <div class="swiper-slide"><img src="https://dl.dropboxusercontent.com/s/xxxxx/100.png" width=97% /></div>  
 <div class="swiper-slide"><img src="https://dl.dropboxusercontent.com/s/xxxxx/101.png" width=97% /></div>  
 <div class="swiper-slide"><img src="https://dl.dropboxusercontent.com/s/xxxxx/102.png" width=97% /></div>  
 <div class="swiper-slide"><img src="https://dl.dropboxusercontent.com/s/xxxxx/103.png" width=97% /></div>  
 </div></div>  
 <script src="https://dl.dropboxusercontent.com/s/xxxxx/swiper.min.js"></script>  
 <script>  
 var swiper = new Swiper('.swiper-container', {  
 paginationClickable: true,  
 spaceBetween: 30,  
 centeredSlides: true,  
 autoplay: 3000,  
 speed: 3000,
 loop: true,
 autoplayDisableOnInteraction: false,  
 effect: 'fade'  
 });  
 </script>