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({
	width: '100%',
  auto:4000,
	prev : "#slide_prev",
	next : "#slide_next",
  items: {
    visible: 3,
    start: -1
  },
  scroll: {
    items  : 1,
		onBefore: function( data ) {
		  data.items.old.eq(1).removeClass('selected');
			data.items.visible.eq(1).addClass('selected');
	},
  easing : "swing",
  duration  : 800 
  },
  visible:{
	  min:3,
		max:3
	},
  pagination: {
    container: '#pager',
    deviation: 1
  }
  });
});
</script>
</script>

HTMl

<div class="mod_mainslide">
<div class="mod_mainslide_wrap">
<ul id="carousel" class="ex_clearfix">
<li><a href="#"><img src="img/slide_01.jpg" width="960" height="350" alt="" /></a></li>
<li><a href="#"><img src="img/slide_02.jpg" width="960" height="350" alt="" /></a></li>
<li><a href="#"><img src="img/slide_03.jpg" width="960" height="350" alt="" /></a></li>
<li><a href="#"><img src="img/slide_04.jpg" width="960" height="350" alt="" /></a></li>
<li><a href="#"><img src="img/slide_05.jpg" width="960" height="350" alt="" /></a></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>
<!-- /mod_mainslide_wrap --></div>
<!-- /mod_mainslide --></div>

CSS

/* carousel
-----------------------------------------*/
.mod_mainslide {
  min-width: 960px;
  height: 350px;
  overflow: hidden;
  position: relative;
}
.mod_mainslide_wrap {
  position: absolute;
  width: 2880px;
  min-width: 2880px;
  left: 50%;
  margin-left: -1440px;
}
#carousel li { float: left; }
#pager {
  position: absolute;
  z-index: 999;
  top: 320px;
  left: 0px;
  width: 100%;
  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: 960px;
  height: 350px;
  position: absolute;
  top:0px;
}
#slide_prev {
  left:0px;
  background: url('../img/bg_nav.png') no-repeat left top;
}
#slide_next {
  left:1920px;
  background: url('../img/bg_nav.png') no-repeat left top;
}