슬라이드 배너 페이지 번호
본문
배너 제작중인 홈페이지 : http://bioicorps.or.kr/?device=mobile
홈페이지 배너 두개를 만들고 있는데 한개를 완성해서 복사해서 하나 더 만들려고 했는데 복사한 두번째 배너는 페이지 번호가 잘 변경되는데 먼저 완성한 첫번째 배너가 슬라이드는 되는데 번호가 안바뀝니다. 두번째 배너 제이쿼리를 지우면 첫번째 배너가 잘되구요 혹시 어떤 문제 때문인지 방법아시는 분 계신가요??
답변 2
같은 아이디를 쓰거나 같은클래스로 호출을 하면 생기는 문제입니다
각 슬라이드별로 아이디나 클래스를 부여하고 각 슬라이드마다 제이쿼리를 달아주세요
클래스명 다 따로 주고 제이쿼리도 다르게 변경했는데도 안되네요 첫번째 배너 제이쿼리를 두번째 배너 제이쿼리 밑에 두면 또 반대로 첫번째는 페이지 번호가 잘나오고 두번째가 안나오는 현상입니다. 코드 한번만 봐주실 수 있으실까요?
<script>
console.clear();
// 상단 메인 배너 슬라이더
$('.main-bn2 > .slider2 > .page-btns2 > .page-btn2').click(function(){
var $clicked = $(this);
var $slider = $(this).closest('.slider2');
var index = $(this).index();
var isLeft = index == 0;
//console.log(index);
var $current = $slider.find(' > .slides2 > .bn2.active2');
var $post;
if ( isLeft ){
$post = $current.prev();
}
else {
$post = $current.next();
}
//console.log($post.length);
if ( $post.length == 0 ){
if ( isLeft ){
$post = $slider.find(' > .slides2 > .bn2:last-child');
}
else {
$post = $slider.find(' > .slides2 > .bn2:first-child');
}
}
$current.removeClass('active2');
$post.addClass('active2');
updateCurrentPageNumber();
});
var intv = setInterval(function(){
$('.main-bn2 > .slider2 > .page-btns2 > .next-btn2').click();
}, 6000);
// 슬라이더 페이지 번호 지정
function pageNumber__Init(){
// 전채 배너 페이지 갯수 세팅해서 .slider 에 'data-slide-total' 넣기
var totalSlideNo = $('.main-bn2 > .slider2 > .slides2 > .bn2').length;
//console.log(totalSlideNo);
$('.main-bn2 > .slider2').attr('data-slide-total', totalSlideNo);
// 각 배너 페이지 번호 매기기
$('.main-bn2 > .slider2 > .slides2 > .bn2').each(function(index, node){
$(node).attr('data-slide-no', index + 1);
});
};
pageNumber__Init();
// 슬라이더 이동시 페이지 번호 변경
function updateCurrentPageNumber(){
var totalSlideNo = $('.main-bn2 > .slider2').attr('data-slide-total');
var currentSlideNo = $('.main-bn2 > .slider2 > .slides2 > .bn2.active2').attr('data-slide-no');
$('.main-bn2 > .slider2 > .page-btns2 > .page-no2 > .total-slide-no2').html(totalSlideNo);
$('.main-bn2 > .slider2 > .page-btns2 > .page-no2 > .current-slide-no2').html(currentSlideNo);
};
updateCurrentPageNumber()
$(".stopBtn122").click(function(){
clearInterval(intv);
});
$(".prev-btn2").click(function(){
clearInterval(intv);
});
</script>
<script>
console.clear();
// 상단 메인 배너 슬라이더
$('.main-bn > .slider > .page-btns > .page-btn').click(function(){
var $clicked = $(this);
var $slider = $(this).closest('.slider');
var index = $(this).index();
var isLeft = index == 0;
//console.log(index);
var $current = $slider.find(' > .slides > .bn.active');
var $post;
if ( isLeft ){
$post = $current.prev();
}
else {
$post = $current.next();
}
//console.log($post.length);
if ( $post.length == 0 ){
if ( isLeft ){
$post = $slider.find(' > .slides > .bn:last-child');
}
else {
$post = $slider.find(' > .slides > .bn:first-child');
}
}
$current.removeClass('active');
$post.addClass('active');
updateCurrentPageNumber();
});
var intv = setInterval(function(){
$('.main-bn > .slider > .page-btns > .next-btn').click();
}, 6000);
// 슬라이더 페이지 번호 지정
function pageNumber__Init(){
// 전채 배너 페이지 갯수 세팅해서 .slider 에 'data-slide-total' 넣기
var totalSlideNo = $('.main-bn > .slider > .slides > .bn').length;
//console.log(totalSlideNo);
$('.main-bn > .slider').attr('data-slide-total', totalSlideNo);
// 각 배너 페이지 번호 매기기
$('.main-bn > .slider > .slides > .bn').each(function(index, node){
$(node).attr('data-slide-no', index + 1);
});
};
pageNumber__Init();
// 슬라이더 이동시 페이지 번호 변경
function updateCurrentPageNumber(){
var totalSlideNo = $('.main-bn > .slider').attr('data-slide-total');
var currentSlideNo = $('.main-bn > .slider > .slides > .bn.active').attr('data-slide-no');
$('.main-bn > .slider > .page-btns > .page-no > .total-slide-no').html(totalSlideNo);
$('.main-bn > .slider > .page-btns > .page-no > .current-slide-no').html(currentSlideNo);
};
updateCurrentPageNumber()
$(".stopBtn12").click(function(){
clearInterval(intv);
});
$(".prev-btn").click(function(){
clearInterval(intv);
});
</script>
