jquery.roundabout.js、jquery.roundabout-shapes.js：リストタグの要素を色々な種類の回転方法で表示してみる

リストタグ（li）系のスライダーって結構色々種類がありますが、このjsで色々な種類の回転表示が可能な様です。

1．CSSの記述例

以下は調整してみて下さい。

<style type="text/css" media="all">
<!--
#sample1{
	padding:100px 0 120px 0;
}
#sample1 ul {
	list-style: none;
	padding: 0;
	margin: 0 0 0px 150px;
	width: 350px;
	height: 100px;
}
#sample1 li {
	height: 100px;
	width: 100px;
	text-align: center;
	cursor: pointer;
}
#sample1 li img {
	width: 100%;
}
#sample1 li.roundabout-in-focus {
	cursor: default;
}
#sample2{
	padding:20px 0;
}
#sample2 ul {
	list-style: none;
	padding: 0;
	margin: 50px 0 20px 150px;
	width: 450px;
	height: 100px;
}
#sample2 li {
	height: 100px;
	width: 100px;
	text-align: center;
	cursor: pointer;
}
#sample2 li img {
	width: 100%;
}
#sample2 li.roundabout-in-focus {
	cursor: default;
}
#sample3{
	padding:40px 0;
}
#sample3 ul {
	list-style: none;
	padding: 0;
	margin: 50px 0 20px 150px;
	width: 350px;
	height: 250px;
}
#sample3 li {
	height: 200px;
	width: 100px;
	text-align: center;
	cursor: pointer;
}
#sample3 li img {
	width: 100%;
}

#sample3 li.roundabout-in-focus {
	cursor: default;
}
-->
</style>

2．読込むJsファイルとJavaScriptの記述例

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="jquery.roundabout.js"></script>
<script src="jquery.roundabout-shapes.js"></script>
<script src="jquery.easing.1.3.js"></script>

<script type="text/javascript">
$(document).ready(function() {
			$('.sample1').roundabout({
				btnNext: ".next",
				btnPrev: ".prev",
				autoplayDuration: 3000,
				autoplayPauseOnHover: true,
				btnStartAutoplay: ".start",
				btnStopAutoplay: ".stop",
				shape: "risingEssence",
			});

			$('.sample2').roundabout({
				btnNext: ".next2",
				btnPrev: ".prev2",
				duration: 2000,
				autoplayDuration: 3000,
				autoplayPauseOnHover: true,
				btnStartAutoplay: ".start2",
				btnStopAutoplay: ".stop2",
				shape: "flurry",
				easing: 'easeOutElastic'
			});

			$('.sample3').roundabout({
				btnNext: ".next3",
				btnPrev: ".prev3",
				duration: 1600,
				autoplayDuration: 3000,
				autoplayPauseOnHover: true,
				btnStartAutoplay: ".start3",
				btnStopAutoplay: ".stop3",
				shape: "rollerCoaster",
				easing: 'easeOutBounce'
			});
});
</script>

3．HTMLの記述例

<div id="sample1">

<ul class="sample1">

 	<li><a href="#"><img src="i1.jpg" alt=""></a></li>


 	<li><a href="#"><img src="i2.jpg" alt=""></a></li>


 	<li><a href="#"><img src="i3.jpg" alt=""></a></li>


 	<li><a href="#"><img src="i4.jpg" alt=""></a></li>


 	<li><a href="#"><img src="i5.jpg" alt=""></a></li>

</ul>

</div>





<hr>


            

<div id="sample2">

<ul class="sample2">

 	<li><a href="#"><img src="i1.jpg" alt=""></a></li>


 	<li><a href="#"><img src="i2.jpg" alt=""></a></li>


 	<li><a href="#"><img src="i3.jpg" alt=""></a></li>


 	<li><a href="#"><img src="i4.jpg" alt=""></a></li>


 	<li><a href="#"><img src="i5.jpg" alt=""></a></li>

</ul>

</div>




<hr>




<div id="sample3">

<ul class="sample3">

 	<li><a href="#"><img src="i1.jpg" alt=""></a></li>


 	<li><a href="#"><img src="i2.jpg" alt=""></a></li>


 	<li><a href="#"><img src="i3.jpg" alt=""></a></li>


 	<li><a href="#"><img src="i4.jpg" alt=""></a></li>


 	<li><a href="#"><img src="i5.jpg" alt=""></a></li>

</ul>

</div>

roundabout-shapes.js、roundabout.js：リストタグの要素を色々な種類の回転方法で表示するデモ

ソース元：
FredHQ – Roundabout for jQuery by Fred LeBlanc
FredHQ – Roundabout Shapes for jQuery & Roundabout by Fred LeBlanc

色んなオプションがあって便利そうですが、色々オプションが有り過ぎて結局は自分の今まで使ってた使い慣れたJsを使用してしまいそう。