ResponsiveSlides.js
レスポンシブWebデザイン対応のスライドショー「ResponsiveSlides.js」。
軽量でコードがシンプルです。
JavaScript
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script> <script src="js/responsiveslides.min.js"></script> <script> jQuery(function() { $("#rslides").responsiveSlides({ speed: 1500 }); }); </script>
HTML
<ul id="rslides"> <li><img src="img/img01.jpg" alt=""></li> <li><img src="img/img02.jpg" alt=""></li> <li><img src="img/img03.jpg" alt=""></li> </ul>
CSS
#rslides { position: relative; list-style: none; overflow: hidden; width: 100%; padding: 0; margin: 0; } #rslides li { -webkit-backface-visibility: hidden; position: absolute; display: none; width: 100%; left: 0; top: 0; } #rslides li:first-child { position: relative; display: block; float: left; } #rslides img { display: block; height: auto; float: left; width: 100%; border: 0; }