簡単！レスポンシヴにも対応した便利なjQueryスライダープラグイン[slick.js]

<div class="fade">
  <div>
    <img src="a0070_000239_m.jpg" width="1600" height="1200" alt="a">
  </div>
  <div>
    <img src="a0070_000240_m.jpg" width="1600" height="1200" alt="a">
  </div>
  <div>
    <img src="a1320_000223_m.jpg" width="1600" height="1200" alt="a">
  </div>
</div>

<link rel="stylesheet" type="text/css" href="reset.css"/>
<link rel="stylesheet" type="text/css" href="slick.css"/>
<link rel="stylesheet" type="text/css" href="slick-theme.css"/>
<style type="text/css">
.fade{
    width:640px;
    margin:0 auto;
  }
.fade div{
    width:100%;
    height:auto;
  }
.fade img{
          width:100%;
    height:auto;
  }
  @media screen and (max-width: 640px) {
    .fade{
        width:100%;
        margin:0 auto;
      }
      .slick-arrow{
      z-index:999!important;
      }
      .slick-prev
      {
          left: 25px;
      }
      [dir='rtl'] .slick-prev
      {
          right: 25px;
      }
      .slick-next
      {
          right: 25px;
      }
      [dir='rtl'] .slick-next
      {
          left: 25px;
      }
      .slick-prev:before,
      .slick-next:before
      {
          color: #fff;
      }
  }
</style>

<script type="text/javascript" src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script type="text/javascript" src="slick.min.js"></script>
<script type="text/javascript">
  $(document).ready(function(){
      $('.fade').slick({
        dots: true,
        infinite: true,
        speed: 500,
        fade: true,
        autoplay: true,
        arrows: true,
        cssEase: 'linear'
      });
  });
</script>