レスポンシブ対応の軽量なスライドショー

1.サムネイル付スライドショー

Flexsliderの公式サイトより、ファイル一式をダウンロードしてください。
ダウンロードしたフォルダの中のflexslider.cssとjquery.flexslider.jsを使用します。
画像はimagesフォルダに格納します。

jquery.min.jsも必要ですので、http://jquery.com/よりダウンロードしてください。

サンプルソース

<link rel="stylesheet" href="css/flexslider.css" type="text/css">
<script src="js/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript" src="js/jquery.flexslider.js"></script>
<script type="text/javascript">
$("document").ready(function(){
  $('.flexslider').flexslider({
    animation: "slide",
    controlNav: "thumbnails"
  });
});
</script>
  
<div class="flexslider">
<ul class="slides">
  <li data-thumb="サムネイル画像URL">
    <img src="画像URL">
  </li>
  <li data-thumb="サムネイル画像URL">
    <img src="画像URL">
  </li>
  <li data-thumb="サムネイル画像URL">
    <img src="画像URL">
  </li>
  <li data-thumb="サムネイル画像URL">
    <img src="画像URL">
  </li>
</ul>
</div>

デモはこちら>>

2.サムネイルなし

サンプルソース

<link rel="stylesheet" href="flexslider.css" type="text/css">
<script src="jquery.min.js" type="text/javascript"></script>
<script type="text/javascript" src="jquery.flexslider.js"></script>
<script type="text/javascript">
$("document").ready(function(){
  $('.flexslider').flexslider({
    animation: "fade",          //切り替え動作 fade or slide
    slideshow: true,            //自動実行 true or false
    slideshowSpeed: 5000,  //スライドショーの時間　1000 = 1秒
    animationDuration: 500, //アニメーション時間　1000 = 1秒
    controlNav: true         //ページングナビボタン　true or false
  });
});
</script>
  
<div class="flexslider">
  <ul class="slides">
    <li>
      <img src="画像URL">
      <p class="flex-caption">画像に関するテキスト</p>
    </li>
    <li>
      <img src="画像URL">
      <p class="flex-caption">画像に関するテキスト</p>
    </li>
    <li>
      <img src="画像URL">
      <p class="flex-caption">画像に関するテキスト</p>
    </li>
    <li>
      <img src="画像URL">
      <p class="flex-caption">画像に関するテキスト</p>
    </li>
    <li>
      <img src="画像URL">
      <p class="flex-caption">画像に関するテキスト</p>
    </li>
  </ul>
</div>

デモはこちら>>

画像に関するテキストがいらない場合は削除してください。サンプルでは削除してあります