$(function(){
var cT = 2000,
sT = 3000;
var index = 0,
$img = $('.box_slide').children('.slide'),
imgLen = $img.length;
$img.not(':first').css('opacity','0');
$('.slick-dots ul').empty(); // 既存のドットをクリア
for (var i = 0; i < imgLen; i++) {
$('.slick-dots ul').append('');
}
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');
$('.slick-dots02 ul').empty(); // 既存のドットをクリア
for (var i = 0; i < imgLen; i++) {
$('.slick-dots02 ul').append('');
}
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');
$('.slick-dots03 ul').empty(); // 既存のドットをクリア
for (var i = 0; i < imgLen; i++) {
$('.slick-dots03 ul').append('');
}
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');
$('.slick-dots04 ul').empty(); // 既存のドットをクリア
for (var i = 0; i < imgLen; i++) {
$('.slick-dots04 ul').append('');
}
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();
});