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($){
$("#carouselpanel").carouFredSel({
	auto : false,
	prev : "#panelslide_prev",
	next : "#panelslide_next",
  items: {
  visible: 4
  }
});

});
</script>

HTMl

<div class="mod_slidepanel">
<ul id="carouselpanel" class="ex_clearfix ex_opaity">
<li><a href="#"><img src="img/panel_01.jpg" alt="" width="240" height="120" /><span>文字も入ります</span></a></li>
<li><a href="#"><img src="img/panel_02.jpg" alt="" width="240" height="120" /><span>文字も入ります</span></a></li>
<li><a href="#"><img src="img/panel_03.jpg" alt="" width="240" height="120" /><span>文字も入ります</span></a></li>
<li><a href="#"><img src="img/panel_04.jpg" alt="" width="240" height="120" /><span>文字も入ります</span></a></li>
<li><a href="#"><img src="img/panel_05.jpg" alt="" width="240" height="120" /><span>文字も入ります</span></a></li>
<!-- /carouselpanel --></ul>
<a class="prev" id="panelslide_prev" href="#"><span>prev</span></a> <a class="next" id="panelslide_next" href="#"><span>next</span></a>
<!-- /mod_slidepanel --></div>

CSS

/* carousel
-----------------------------------------*/
.mod_slidepanel {
    margin: 0 auto;
    position: relative;
    width: 990px;
}
#carouselpanel li{
 position:relative;
 width:240px;
  height: 150px;
  margin: 0 10px 0 0;
  background-color: #FFF;
  float: left;
 font-size:93%; /* 12px */
}

#carouselpanel li a{
 display:block;
}
#carouselpanel li a span{
 display:inline-block;
 padding:8px 15px 0 15px;
}
#carouselpanel li a:link    {color:#000; text-decoration:none;}
#carouselpanel li a:visited {color:#000; text-decoration:none;}
#carouselpanel li a:hover   {color:#000; text-decoration:underline;}
#carouselpanel li a:active  {color:#000; text-decoration:underline;}

#panelslide_prev span,
#panelslide_next span{
	display: none;
}
#panelslide_prev,
#panelslide_next{
 display:block;
 width:33px;
 height:55px;
 position:absolute;
 top:40px;
}
#panelslide_prev{
 left:-33px;
	background: url('../img/bg_sprite.png') no-repeat 0px 0px;
}
#panelslide_next{
 left:993px;
	background: url('../img/bg_sprite.png') no-repeat -100px 0px;
}