carouFredSel[jquery]を使ったページナビ・ページ送りのあるスライドショー

スライドショーに「前へ・次へ」の表示と「スライド枚数と現在地表示」を設置したスライドショーです。自動送り・手動送りできます。

carouFredSel を使っているので、先にjqueryとjquery.carouFredSel-6.2.1.jsを読み込みます。
crossfadeにすることもできます。

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($){
$(function() {
  $('#carousel').carouFredSel({
  auto        : 4000,
    prev : "#slide_prev",
    next : "#slide_next",
  //responsive: true,
  items: {
  visible: 1,
  width: 960,
  height: 350
  },
  scroll: {
  items  : 1,
  easing : "swing",
  //fx : "crossfade",
  duration  : 800 
  },
  pagination: '#pager'
  });
});
});
</script>

HTMl

<div id="mainslide">
<div id="mainslide_wrap">
<ul id="carousel" class="ex_clearfix">
<li><img src="img/slide_01.jpg" width="960" height="350" alt="" /></li>
<li><img src="img/slide_02.jpg" width="960" height="350" alt="" /></li>
<li><img src="img/slide_03.jpg" width="960" height="350" alt="" /></li>
<li><img src="img/slide_04.jpg" width="960" height="350" alt="" /></li>
<li><img src="img/slide_05.jpg" width="960" height="350" alt="" /></li>
</ul>
<div id="pager"></div>
<a class="prev" id="slide_prev" href="#"><span>prev</span></a> <a class="next" id="slide_next" href="#"><span>next</span></a>
<!-- /mainslide_wrap --></div>
<!-- /mainslide --></div>

CSS

/* carousel
-----------------------------------------*/
#mainslide {
}
#mainslide_wrap {
 position:relative;
 margin:0 auto;
 width:960px;
}
#carousel li {
  float: left;
}
#pager {
    position: absolute;
    z-index:999;
    top: 320px;
    left:0px;
    width: 960px;
    text-align: center;
}
#pager a {
    display: inline-block;
    margin: 0 10px;
    width: 13px;
    height: 13px;
    background: url('../img/bg_sprite.png') no-repeat -200px 0px;
}
#pager a.selected{
    background-position: -200px -13px;
}
#pager a span {
    display: none;
}
#slide_prev span,
#slide_next span{
    display: none;
}
#slide_prev,
#slide_next{
 display:block;
 width:33px;
 height:57px;
 position:absolute;
 top:150px;
}
#slide_prev{
 left:10px;
    background: url('../img/bg_sprite.png') no-repeat 0px 0px;
}
#slide_next{
 left:915px;
    background: url('../img/bg_sprite.png') no-repeat -100px 0px;
}