carouFredSel[jquery]を使ってタブをクリックできるスライドショー

デモページへopen_in_new

JSを読み込みます

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="../js/jquery.carouFredSel-6.2.1.js"></script>

JavaScript

<script type="text/javascript" language="javascript">
jQuery(document).ready(function($){
  $('#carousel').carouFredSel({
    auto		: 3000,
    pagination	:{container: '#pager',
    anchorBuilder: function() {
      return '<a href="#" class="'+ $(this).prop("class") +'"></a>';
    }
  },
// スタート位置を指定できる
// items:{ 
//  start: -1,
//  },
  scroll : {
    items  : 1,
    fx : "fade",
    duration  : 800,                        
    }  
	});
});
</script>

HTMl

<div class="mod_mainslide">
<div class="mod_mainslide_wrap">
<ul id="carousel" class="ex_clearfix">
<li class="menu01"><a href="#"><img src="img/slide_01.jpg" width="952" height="350" alt="" /></a></li>
<li class="menu02"><a href="#"><img src="img/slide_02.jpg" width="952" height="350" alt="" /></a></li>
<li class="menu03"><a href="#"><img src="img/slide_03.jpg" width="952" height="350" alt="" /></a></li>
<li class="menu04"><a href="#"><img src="img/slide_04.jpg" width="952" height="350" alt="" /></a></li>
<li class="menu05"><a href="#"><img src="img/slide_05.jpg" width="952" height="350" alt="" /></a></li>
</ul>
<div id="pager"></div>
<!-- /mod_mainslide_wrap --></div>
<!-- /mod_mainslide --></div>

CSS

/* carousel
-----------------------------------------*/
.mod_mainslide {
 width:952px;
 margin:50px auto 0 auto;
 border:4px solid #333;
}
.mod_mainslide_wrap {
 position:relative;
 width:952px;
 height:350px;
}
.caroufredsel_wrapper{
 margin-top:0px!important;
}
#carousel ul{
 height:350px;
 overflow:hidden;
}
#carousel li { 
 width:952px;
 display: block;
 float: left;
}
#pager {
 position:absolute;
 top:-49px;
 left:-4px;
}
#pager a {
 float:left;
 width:127px;
 height:45px;
 padding:0 2px 0 0;
 display:block;
}
#pager a.menu01{
	background:transparent url('../img/slide_nav01.png') no-repeat left top;
}
#pager a.menu01.selected{
	background:transparent url('../img/slide_nav01_current.png') no-repeat left top;
}
#pager a.menu02{
	background:transparent url('../img/slide_nav02.png') no-repeat left top;
}
#pager a.menu02.selected{
	background:transparent url('../img/slide_nav02_current.png') no-repeat left top;
}
#pager a.menu03{
	background:transparent url('../img/slide_nav03.png') no-repeat left top;
}
#pager a.menu03.selected{
	background:transparent url('../img/slide_nav03_current.png') no-repeat left top;
}
#pager a.menu04{
	background:transparent url('../img/slide_nav04.png') no-repeat left top;
}
#pager a.menu04.selected{
	background:transparent url('../img/slide_nav04_current.png') no-repeat left top;
}
#pager a.menu05{
	background:transparent url('../img/slide_nav05.png') no-repeat left top;
}
#pager a.menu05.selected{
	background:transparent url('../img/slide_nav05_current.png') no-repeat left top;
}