様々なスライダーが実現できる carouFredSel を使ってみました。
その中でも特に実用的な
・画面横幅いっぱいのスライダー
・横幅固定のスライダー
・レスポンシブスライダー
のデモを作っています。

まずはプラグインのデータをダウンロードして読み込みます。
carouFredSel(github)
<script src="http://code.jquery.com/jquery-1.9.0.min.js"></script> <script type="text/javascript" src="jquery.carouFredSel-6.2.1-packed.js"></script>
今回のデモでは、htmlの構造は同じです。(id名は変えてありますが)
共通html
<div id="slider"> <div id="wrapper"> <ul id="carousel"> <li><a href="#"><img src="../images/main-bnr/01.jpg" width="600" height="300" /></a></li> <li><a href="#"><img src="../images/main-bnr/02.jpg" width="600" height="300" /></a></li> <li><a href="#"><img src="../images/main-bnr/03.jpg" width="600" height="300" /></a></li> <li><a href="#"><img src="../images/main-bnr/04.jpg" width="600" height="300" /></a></li> </ul> <a href="#" id="prev"></a> <a href="#" id="next"></a> <!-- / #wrapper --></div> <div id="pager"></div> <!-- / #slider --></div>
画面横いっぱいスライダー
CSS
#slider { position:relative; overflow: hidden; } #wrapper { background: #fff; width: 100%; height: 300px; overflow: hidden; } #carousel li { float: left; } #prev, #next { background-color: #fff; opacity:0.7; filter: alpha(opacity=70);/* ie 6 7 */ -ms-filter: "alpha(opacity=70)";/* ie 8 */ zoom:1; display: block; height: 300px; width: 50%; top: 0; position: absolute; } #prev:hover, #next:hover { opacity:0.4; filter: alpha(opacity=40);/* ie 6 7 */ -ms-filter: "alpha(opacity=40)";/* ie 8 */ zoom:1; } #prev { left: -300px;/* スライドする画像の横半分の値 */ background:#fff url( ../images/arrow-left.png ) 95% center no-repeat; } #next { background:#fff url( ../images/arrow-right.png ) 5% center no-repeat; right: -300px;/* スライドする画像の横半分の値 */ } #prev img { right:20px; top:120px; position:absolute; } #next img { left:20px; top:120px; position:absolute; } #pager { text-align:center; padding:10px; } #pager a { border: 2px solid #ccc; border-radius:5px; -webkit-border-radius:5px; -moz-border-radius:5px; display: inline-block; width: 5px; height: 5px; margin: 0 5px 0 0; } #pager a:hover { background:#eee ; } #pager a span { display: none; } #pager a.selected { background-color: #ccc; }
jQuery
$(function() { $('#carousel').carouFredSel({ width: '100%', items: { visible: 3, start: -1 }, scroll: { items: 1, duration: 1000, timeoutDuration: 3000 }, prev: '#prev', next: '#next', pagination: { container: '#pager', deviation: 1 } }); });
横幅固定スライダー
CSS
#slider { position:relative; width:800px; margin:0 auto; overflow: hidden; } #carousel li { float: left; } #wrapper { background: #fff; width: 100%; height: 300px; overflow: hidden; } #prev, #next { background-color: #fff; opacity:0.7; filter: alpha(opacity=70);/* ie 6 7 */ -ms-filter: "alpha(opacity=70)";/* ie 8 */ zoom:1; display: block; height: 300px; width: 50%; top: 0; position: absolute; } #prev:hover, #next:hover { opacity:0.4; filter: alpha(opacity=40);/* ie 6 7 */ -ms-filter: "alpha(opacity=40)";/* ie 8 */ zoom:1; } #prev { left: -300px;/* スライドする画像の横半分の値 */ background:#fff url( ../images/arrow-left.png ) 95% center no-repeat; } #next { right: -300px;/* スライドする画像の横半分の値 */ background:#fff url( ../images/arrow-right.png ) 5% center no-repeat; } #prev img , #prev img { right:20px; top:120px; position:absolute; } #next img { left:20px; top:120px; position:absolute; } #pager { text-align:center; padding:10px; } #pager a { border: 2px solid #ccc; border-radius:5px; -webkit-border-radius:5px; -moz-border-radius:5px; display: inline-block; width: 5px; height: 5px; margin: 0 5px 0 0; } #pager a:hover { background:#eee ; } #pager a span { display: none; } #pager a.selected { background-color: #ccc; }
jQuery
$(function() { $('#carousel').carouFredSel({ width: '100%', items: { visible: 3, start: -1 }, scroll: { items: 1, duration: 1000, timeoutDuration: 2000 }, prev: '#prev', next: '#next', pagination: { container: '#pager', deviation: 1 } }); });
レスポンシブ(数固定・画像サイズ可変)
CSS
#slider { position: relative; margin:20px 0; width: 100%; } #wrapper { width: 100%; left: 5%; overflow: hidden; border-top: 1px #ddd solid; border-bottom: 1px #ddd solid; } #carousel li { margin: 10px 5px; border: none; display: block; float: left; } #carousel li img { width: 100%; height: auto; } #prev, #next { position: absolute; top: 0; background: center center no-repeat #ddd; width: 5%; } #prev:hover, #next:hover { background-color: #ccc; } #prev { background-image: url( ../images/arrow-left.png ); left: 0; } #next { background-image: url( ../images/arrow-right.png ); right: 0; } #pager { text-align:center; padding:10px; } #pager a { border: 2px solid #ccc; border-radius:5px; -webkit-border-radius:5px; -moz-border-radius:5px; display: inline-block; width: 5px; height: 5px; margin: 0 5px 0 0; } #pager a:hover { background:#eee ; } #pager a span { display: none; } #pager a.selected { background-color: #ccc; }
jQuery
$(function() { $('#carousel').carouFredSel({ responsive: true, items: { width: 300, height: '50%', visible: 3 }, auto: { items: 1 }, pagination: { container: '#pager', deviation: 1 }, prev: '#prev', next: '#next' }); var $elems = $('#wrapper, #prev, #next'), $image = $('#responsive-carousel li:first') $(window).bind( 'resize.example', function() { var height = $image.outerHeight( true ); $elems .height( height ) }).trigger( 'resize.example' ); });