$(function(){
	var cT = 2000,
		sT = 3000;
	var	index = 0,
		$img = $('.box_slide').children('.slide'),
		imgLen = $img.length;
	$img.not(':first').css('opacity','0');
	for (var i=0; i<imgLen; i++) {
		$('.slick-dots ul').append('<li class="thum'+ i +'"></li>');
	}
	var $tN = $('.slick-dots li');
	$tN.first().addClass('active');
	$tN.click(function(){
		$img.stop();
		clearInterval(slides);
		$(this).addClass('active').siblings().removeClass('active');
		var number = $(this).index(),
			$choiceImg = $img.eq(number);
		index = (number) % imgLen;
		$choiceImg.siblings().animate({opacity:0},cT);
		$choiceImg.animate({opacity:1},cT);
		start();
	});
	function start(){
		slides = setInterval(function(){
			var next = (index +1) % imgLen;
			$tN.removeClass('active').eq(next).addClass('active');
			$img.eq(index).animate({opacity:0},cT);
			$img.eq(next).animate({opacity:1},cT);
			index = next;
		},sT + cT);
	};

	var $btn_next = $('#btn_next'),
 		$btn_prev = $('#btn_prev');
 	$btn_next.click(function(){
 		//次のスライドの値を代入
 		var next = (index +1) % imgLen;
 		//現在アクティブ状態の次のサムネイルをクリックする
 		$tN.eq(next).click();
 	});
 	$btn_prev.click(function(){
 		//前のスライドの値を代入
 		var prev = (index -1) % imgLen;
 		//現在アクティブ状態の前のサムネイルをクリックする
 		$tN.eq(prev).click();
 	});

	start();
});

$(function(){
	var cT = 2000,
		sT = 3000;
	var	index = 0,
		$img = $('.box_slide02').children('.slide'),
		imgLen = $img.length;
	$img.not(':first').css('opacity','0');
	for (var i=0; i<imgLen; i++) {
		$('.slick-dots02 ul').append('<li class="thum'+ i +'"></li>');
	}
	var $tN = $('.slick-dots02 li');
	$tN.first().addClass('active');
	$tN.click(function(){
		$img.stop();
		clearInterval(slides);
		$(this).addClass('active').siblings().removeClass('active');
		var number = $(this).index(),
			$choiceImg = $img.eq(number);
		index = (number) % imgLen;
		$choiceImg.siblings().animate({opacity:0},cT);
		$choiceImg.animate({opacity:1},cT);
		start();
	});
	function start(){
		slides = setInterval(function(){
			var next = (index +1) % imgLen;
			$tN.removeClass('active').eq(next).addClass('active');
			$img.eq(index).animate({opacity:0},cT);
			$img.eq(next).animate({opacity:1},cT);
			index = next;
		},sT + cT);
	};

	var $btn_next = $('#btn_next02'),
 		$btn_prev = $('#btn_prev02');
 	$btn_next.click(function(){
 		//次のスライドの値を代入
 		var next = (index +1) % imgLen;
 		//現在アクティブ状態の次のサムネイルをクリックする
 		$tN.eq(next).click();
 	});
 	$btn_prev.click(function(){
 		//前のスライドの値を代入
 		var prev = (index -1) % imgLen;
 		//現在アクティブ状態の前のサムネイルをクリックする
 		$tN.eq(prev).click();
 	});

	start();
});

$(function(){
	var cT = 2000,
		sT = 3000;
	var	index = 0,
		$img = $('.box_slide03').children('.slide'),
		imgLen = $img.length;
	$img.not(':first').css('opacity','0');
	for (var i=0; i<imgLen; i++) {
		$('.slick-dots03 ul').append('<li class="thum'+ i +'"></li>');
	}
	var $tN = $('.slick-dots03 li');
	$tN.first().addClass('active');
	$tN.click(function(){
		$img.stop();
		clearInterval(slides);
		$(this).addClass('active').siblings().removeClass('active');
		var number = $(this).index(),
			$choiceImg = $img.eq(number);
		index = (number) % imgLen;
		$choiceImg.siblings().animate({opacity:0},cT);
		$choiceImg.animate({opacity:1},cT);
		start();
	});
	function start(){
		slides = setInterval(function(){
			var next = (index +1) % imgLen;
			$tN.removeClass('active').eq(next).addClass('active');
			$img.eq(index).animate({opacity:0},cT);
			$img.eq(next).animate({opacity:1},cT);
			index = next;
		},sT + cT);
	};
	
	var $btn_next = $('#btn_next03'),
	 		$btn_prev = $('#btn_prev03');
	 	$btn_next.click(function(){
	 		//次のスライドの値を代入
	 		var next = (index +1) % imgLen;
	 		//現在アクティブ状態の次のサムネイルをクリックする
	 		$tN.eq(next).click();
	 	});
	 	$btn_prev.click(function(){
	 		//前のスライドの値を代入
	 		var prev = (index -1) % imgLen;
	 		//現在アクティブ状態の前のサムネイルをクリックする
	 		$tN.eq(prev).click();
	 	});

	start();
});


$(function(){
	var cT = 2000,
		sT = 3000;
	var	index = 0,
		$img = $('.box_slide04').children('.slide'),
		imgLen = $img.length;
	$img.not(':first').css('opacity','0');
	for (var i=0; i<imgLen; i++) {
		$('.slick-dots04 ul').append('<li class="thum'+ i +'"></li>');
	}
	var $tN = $('.slick-dots04 li');
	$tN.first().addClass('active');
	$tN.click(function(){
		$img.stop();
		clearInterval(slides);
		$(this).addClass('active').siblings().removeClass('active');
		var number = $(this).index(),
			$choiceImg = $img.eq(number);
		index = (number) % imgLen;
		$choiceImg.siblings().animate({opacity:0},cT);
		$choiceImg.animate({opacity:1},cT);
		start();
	});
	function start(){
		slides = setInterval(function(){
			var next = (index +1) % imgLen;
			$tN.removeClass('active').eq(next).addClass('active');
			$img.eq(index).animate({opacity:0},cT);
			$img.eq(next).animate({opacity:1},cT);
			index = next;
		},sT + cT);
	};
	
	var $btn_next = $('#btn_next04'),
	 		$btn_prev = $('#btn_prev04');
	 	$btn_next.click(function(){
	 		//次のスライドの値を代入
	 		var next = (index +1) % imgLen;
	 		//現在アクティブ状態の次のサムネイルをクリックする
	 		$tN.eq(next).click();
	 	});
	 	$btn_prev.click(function(){
	 		//前のスライドの値を代入
	 		var prev = (index -1) % imgLen;
	 		//現在アクティブ状態の前のサムネイルをクリックする
	 		$tN.eq(prev).click();
	 	});

	start();
});