スライドで縦に並ぶサムネイルなら簡単なこれで決まり！

縦のサムネイルが右などに並んだスライダーを設置しようと、sliderproで設置したのですが、いろいろなプラグインとバッティングするので、
他にないか探していたら、簡単で、バッティングもしないいいものがありました！

HTML表示部分
↓

<div id="slider_tate">
<ul id="photo">
<li><a href="#"><img src="<?php bloginfo('template_directory');?>/images/toptateslide01.jpg" /></a></li>
<li><a href="#"><img src="<?php bloginfo('template_directory');?>/images/toptateslide02.jpg" /></a></li>
<li><a href="#"><img src="<?php bloginfo('template_directory');?>/images/toptateslide03.jpg" /></a></li>
<li><a href="#"><img src="<?php bloginfo('template_directory');?>/images/toptateslide04.jpg" /></a></li>        
</ul>
<ul id="thum">
<li><img src="<?php bloginfo('template_directory');?>/images/toptateslidemini01.jpg"></li>
<li><img src="<?php bloginfo('template_directory');?>/images/toptateslidemini02.jpg"></li>
<li><img src="<?php bloginfo('template_directory');?>/images/toptateslidemini03.jpg"></li>
<li><img src="<?php bloginfo('template_directory');?>/images/toptateslidemini04.jpg"></li>
</ul>
</div>

CSS
↓

/*　縦スライダー　*/

#slider_tate img {vertical-align:bottom;}
#slider_tate {
	width:760px;
	overflow: hidden;
	margin-bottom: 30px;
}
 
#photo {
   width:540px;
   height:380px;
   float:left;
   position:relative;
}
#photo li {
   position:absolute;
}
 
#thum {
   width:200px;
   float:right;
}
#thum li {
   cursor:pointer;
}

js部分　（html内に書いてもいいけど、今回は外部js化して読み込みました。
↓

<?php wp_enqueue_script('simpletatethumslider', get_bloginfo('template_url').'/js/simpletatethumslider.js'); ?><!-- TOPPAGEの縦サムネイルスライダー用 -->

$(function(){
	var slidSpd = 300;		//フェードの速度
	var slidTimer = 4000;	//スライドの間隔
	var count = 0;			//count番目の画像が表示される（0から数える）

	//画像の枚数を調べて<li>にidを付加
	var qua = $("#photo li").length;
	for(i=0; i<qua; i++) {
      //メイン画像のリストにidを付与
		$("#photo li:eq("+i+")").attr("id", "list"+ i);
      //サムネイル画像のリストにidを付与
      $("#thum li:eq("+i+")").attr("id", "btn"+ i);
	}

	//画像をフェードさせる関数
	function photoFade() {
      //countと同じ番号のidが振られた<li>を一番後ろ（重なりの一番上にくる）へ移動させる
		$("#photo li#list"+count).appendTo('#photo');
      
      //移動させた<li>の透明度を0に
		$('#photo li:last').css({ opacity:'0'})
      
      //透明度を0→100へアニメーションさせ、フェードで出現するように見せる
		$('#photo li:last').stop(true, false).animate({ opacity:'1' }, slidSpd ); 
      
      //全てのサムネイル画像の透明度を1に
      $("#thum li").css({ opacity:'0.6'})
	  
	    
      //countと同じ番号のidが振られたサムネイルのみ半透明にアニメーションさせる
      $("#thum #btn"+count).stop(true, false).animate({ opacity:'1' }, slidSpd ); 
	}
   
	//カウントを1増やす関数
	function countUp(){
      //countが画像枚数より大きくなれば0へ戻し、それ以外なら1増やす
		if(count>=qua-1) {
			count = 0;
		} else {
			count ++;
		}
	}

	//slidTimer秒毎に繰り返し処理をさせる関数
	var timerID;
	function timerStart(){
		clearInterval(timerID);
		timerID = setInterval(function(){
			countUp();
			photoFade();
		}, slidTimer);
	};
   
   //サムネイルを押した時の処理
   $("#thum li").click(function(){
      var index =  $("#thum li").index(this);
      count = index;
      photoFade();
      timerStart();
   });
   

	//スライドスタート
	photoFade();
	timerStart();
});

参考サイト

jQueryで作るサムネイルが縦にならんだスライダー

DEMO