［JS覚書］右サイドに小さめ画像とテキストがハイライトされるスライダーカスタマイズメモ

2013年3月29日

今まで何度か使わせてもらってる、メイン画像に説明テキスト＆リンクが入り、右サイドに小さめ画像とテキストがハイライトされるスライダーのカスタマイズメモです。

参考

jQueryでかっこいいイメージスライダー！ | うぇぶこん-Web Concourse-

設置サンプル

Create Featured Content Slider Using jQuery UI

設置方法

以下をの直前へ。head中でもよいですが。

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" ></script>  
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.5.3/jquery-ui.min.js" ></script>
<script type="text/javascript">
	$(document).ready(function(){
		$("#featured > ul").tabs({fx:{opacity: "toggle"}}).tabs("rotate", 5000, true);
	});
</script>

以下をお手元のCSS内に記述します。それか専用のCSSを一つ作っちゃうか。
画像の大きさや設定などはよきにはからってください。

#featured{
	width:710px;
	padding-right:250px;
	position:relative;
	height:250px;
	background:#fff;
	margin-bottom: 30px;
}
#featured ul.ui-tabs-nav{
	position:absolute;
	top:0;
	list-style:none;
	padding:0;
	margin:0;
	width:350px;
	left: 610px;
}
#featured ul.ui-tabs-nav li{ 
	padding:1px 0; padding-left:13px;  
	font-size:12px; 
	color:#666; 
}
#featured ul.ui-tabs-nav li img{ 
	float:left; margin:2px 5px; 
	background:#fff; 
	padding:2px; 
	border:1px solid #eee;
}
#featured ul.ui-tabs-nav li span{ 
	font-size:11px; font-family:Verdana; 
	line-height:18px; 
}
#featured li.ui-tabs-nav-item a{ 
	display:block; 
	height:60px; 
	color:#333;  background:#fff; 
	line-height:20px;
}
#featured li.ui-tabs-nav-item a:hover{ 
	background:#f2f2f2; 
}
#featured li.ui-tabs-selected{ 
	background:url('images/selected-item.gif') top left no-repeat;  
}
#featured ul.ui-tabs-nav li.ui-tabs-selected a{ 
	background:#ccc; 
}
#featured .ui-tabs-panel{
	width:600px;
	height:250px;
	background:#999;
	position:relative;
}
#featured .ui-tabs-panel .info{ 
	position:absolute; 
	top:180px; left:0; 
	height:70px; 
	background: url('../images/transparent-bg.png'); 
}
#featured .info h2{
	font-size:18px;
	font-family:"ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
	color:#fff;
	padding:5px;
	margin:0;
	overflow:hidden;
}
#featured .info p{ 
	margin:0 5px; 
	font-family:Verdana; font-size:11px; 
	line-height:15px; color:#f0f0f0;
}
#featured .info a{ 
	text-decoration:none; 
	color:#fff; 
}
#featured .info a:hover{ 
	text-decoration:underline; 
}
#featured .ui-tabs-hide{ 
	display:none; 
}