슬라이드 배너 페이지 번호 채택완료

sson4956 4년 전 조회 2,006

배너 제작중인 홈페이지 : http://bioicorps.or.kr/?device=mobile

홈페이지 배너 두개를 만들고 있는데 한개를 완성해서 복사해서 하나 더 만들려고 했는데 복사한 두번째 배너는 페이지 번호가 잘 변경되는데 먼저 완성한 첫번째 배너가 슬라이드는 되는데 번호가 안바뀝니다. 두번째 배너 제이쿼리를 지우면 첫번째 배너가 잘되구요 혹시 어떤 문제 때문인지 방법아시는 분 계신가요??

#슬라이드 #배너번호

댓글을 작성하려면 로그인이 필요합니다.

답변 2개

정렬:

채택된 답변

+20 포인트

바트컨트롤

4년 전

로그인 후 평가할 수 있습니다

댓글을 작성하려면 로그인이 필요합니다.

병원에서일해요

4년 전

같은 아이디를 쓰거나 같은클래스로 호출을 하면 생기는 문제입니다

각 슬라이드별로 아이디나 클래스를 부여하고 각 슬라이드마다 제이쿼리를 달아주세요

로그인 후 평가할 수 있습니다

답변에 대한 댓글 1개

sson4956

4년 전

클래스명 다 따로 주고 제이쿼리도 다르게 변경했는데도 안되네요 첫번째 배너 제이쿼리를 두번째 배너 제이쿼리 밑에 두면 또 반대로 첫번째는 페이지 번호가 잘나오고 두번째가 안나오는 현상입니다. 코드 한번만 봐주실 수 있으실까요?

<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>

클래스명 다 따로 주고 제이쿼리도 다르게 변경했는데도 안되네요 첫번째 배너 제이쿼리를 두번째 배너 제이쿼리 밑에 두면 또 반대로 첫번째는 페이지 번호가 잘나오고 두번째가 안나오는 현상입니다. 코드 한번만 봐주실 수 있으실까요?

// 상단 메인 배너 슬라이더
$('.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>

댓글을 작성하려면 로그인이 필요합니다.

답변을 작성하려면 로그인이 필요합니다.

로그인

슬라이드 배너 페이지 번호 채택완료

답변 2개

답변에 대한 댓글 1개

공유하기