ResponsiveSlides.js

• Dec 17, 2013
• Tags: javascript, tips

レスポンシブWebデザイン対応のスライドショー「ResponsiveSlides.js」。
軽量でコードがシンプルです。

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;
}