슬라이드 배너 중지 버튼 채택완료

버튼 만든 후에 clearInterval(); 줘도 정지가 안되고 있습니다. 제이쿼리 초보라 코드 한번만 봐주실 수 있을까요??

<div class="main-bn">
<div class="slider">
<div class="slides">
<div class="bn active">
<a href="http://mbi.kaist.ac.kr"><img src="<?php echo G5_THEME_IMG_URL ?>/banner4.png" alt=""></a>
</div>
<div class="bn" style="background-image:url('https://kimyang-sun.github.io/pf-img/esc-img/main_bn_02.jpg');">
<a href="http://mbi.kaist.ac.kr"> <img src="<?php echo G5_THEME_IMG_URL ?>/banner3.png" alt=""></a>
</div>
<div class="bn" style="background-image:url('https://kimyang-sun.github.io/pf-img/esc-img/main_bn_03.jpg');">
<a href="http://mbi.kaist.ac.kr"> <img src="<?php echo G5_THEME_IMG_URL ?>/banner2.png" alt=""></a>
</div>
<div class="bn" style="background-image:url('https://kimyang-sun.github.io/pf-img/esc-img/main_bn_04.jpg');">
<a href="http://mbi.kaist.ac.kr"> <img src="<?php echo G5_THEME_IMG_URL ?>/banner1.png" alt=""></a>
</div>

</div>
<div class="page-btns">
<button class="page-btn prev-btn"><i class="xi-angle-left"></i></button>
<button class="stopBtn12"><span> ∥ </span></button>
<button class="page-btn next-btn"><i class="xi-angle-right"></i></button>
<div class="page-no">
<span class="current-slide-no"></span>
<span class="slash">/</span>
<span class="total-slide-no"></span>
</div>
</div>
</div>
</div>















<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();
});

setInterval(function(){
$('.main-bn > .slider > .page-btns > .next-btn').click();
}, 3000);

// 슬라이더 페이지 번호 지정
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);
});
</script>