JQuery Slide

불릿버튼 슬라이드 만들기

불릿버튼을 클릭하면 해당 이미지로 슬라이드 되고 해당 이미지가 자동으로 넘어가면 해당 불릿버튼이 active되는 슬라이드를 JQuery로 만들었다.

결과

HTML

<div id="wrap">
        <div class="slide">
            <ul class="slideUl">
                <li class="slide01"><a href="#" class="hidden">메인배너1</a></li>
                <li class="slide02"><a href="#" class="hidden">메인배너2</a></li>
                <li class="slide03"><a href="#" class="hidden">메인배너3</a></li>
            </ul>
            <div class="arrowBtn">
                <img src="./img/left.png" alt="prev" class="prev" width="30" height="50">
                <img src="./img/right.png" alt="next" class="next" width="30" height="50">
            </div>
            <ul class="pagerBtn">
                <li class="on"><a href="#" class="hidden">1</a></li>
                <li><a href="#" class="hidden">2</a></li>
                <li><a href="#" class="hidden">3</a></li>
            </ul>
        </div>
    </div>

CSS

@charset "utf-8";

*{margin:0; padding:0}
ul{list-style: none;}
a{text-decoration: none; color:#222;}
.hidden{display: block; overflow: hidden; width:0; height:0; line-height: 0;text-indent: -99999em;}
.slide{width:100%; height:500px; position: relative; top:0; left:0; overflow: hidden;}
.slide .slideUl{position: relative; width:100%; height:100%; top:0; left:0}
.slide .slideUl li{position: absolute; width:100%; height:100%; top:0; left:0}
.slide .slideUl li a{display: block; width:100%; height:100%;}
.slide .slideUl .slide01{background: url(../img/0.png)no-repeat 50% 0;}
.slide .slideUl .slide02{background: url(../img/1.png)no-repeat 50% 0; left:100%;}
.slide .slideUl .slide03{background: url(../img/2.png)no-repeat 50% 0; left:200%;}

.slide .arrowBtn{position: absolute; top:50%; transform: translateY(-50%); width:100%;}
.slide .arrowBtn .prev{position: absolute; left:100px; cursor: pointer;}
.slide .arrowBtn .next{position: absolute; right:100px; cursor: pointer;}
.pagerBtn{position: absolute; bottom:50px; width:100%; left:50%;}
.pagerBtn .on{background:rgba(0, 0, 0, 0.9);}

.pagerBtn li{width:15px; height:15px; margin:0 5px; margin:0 5px; border-radius: 50%; background:rgba(0, 0, 0, .3); float: left;}
.pagerBtn li a{display: block;}

script

let slide=$('.slideUl > li');
let pagerBtn=$('.pagerBtn > li');
let slideover=$('.slide');
let rightBtn=$('.next')
let leftBtn=$('.prev')
let current=0;
let btnSlideInterval;


auto();
function auto(){
    btnSlideInterval=setInterval(function(){
        let prev=slide.eq(current);
        let prevBtn=pagerBtn.eq(current);
        move(prev, 0, '-100%');
        prevBtn.removeClass('on')
        current++;
        if(current==slide.size()){
            current=0;
        }
        let next=slide.eq(current);
        let nextBtn=pagerBtn.eq(current);
        move(next, '100%', 0);
        nextBtn.addClass('on')
    },3000);
    function move(a, b, c){
        a.css('left',b).stop().animate({left:c},500);
    }
    //next btn
    rightBtn.click(function(){
        let prev=slide.eq(current);
        let prevBtn=pagerBtn.eq(current);
        move(prev, 0, '-100%');
        prevBtn.removeClass('on')
        current++;
        if(current==slide.size()){
            current=0;
        }
        let next=slide.eq(current);
        let nextBtn=pagerBtn.eq(current);
        move(next, '100%', 0);
        nextBtn.addClass('on')
    });
    leftBtn.click(function(){
        let prev=slide.eq(current);
        let prevBtn=pagerBtn.eq(current);
        move(prev, 0, '100%');
        prevBtn.removeClass('on')
        current--;
        if(current==-slide.size()){
            current=0;
        }
        let next=slide.eq(current);
        let nextBtn=pagerBtn.eq(current);
        move(next, '-100%', 0);
        nextBtn.addClass('on')
    });
    function bulletMove1(i){
        if(current==i) return;
        let currentEl=slide.eq(current);
        let nextEl=slide.eq(i);
        currentEl.css('left','0').stop().animate({left:'-100%'},500);
        nextEl.css('left','100%').stop().animate({left:0},500);
        current=i;
    }
    function bulletMove2(i){
        if(current==i) return;
        let currentEl=slide.eq(current);
        let nextEl=slide.eq(i);
        currentEl.css('left','0').stop().animate({left:'100%'},500);
        nextEl.css('left','-100%').stop().animate({left:0},500);
        current=i;
    }
    pagerBtn.click(function(){
        let tg=$(this);
        let i=tg.index();
        pagerBtn.removeClass('on')
        tg.addClass('on')
        if(current>i){
            bulletMove2(i);
        }else{
            bulletMove1(i);
        }
    })
};

auto();
function auto(){
    btnSlideInterval=setInterval(function(){
        let prev=slide.eq(current);
        let prevBtn=pagerBtn.eq(current);
        move(prev, 0, '-100%');
        prevBtn.removeClass('on')
        current++;
        if(current==slide.size()){
            current=0;
        }
        let next=slide.eq(current);
        let nextBtn=pagerBtn.eq(current);
        move(next, '100%', 0);
        nextBtn.addClass('on')
    },3000);
    function move(a, b, c){
        a.css('left',b).stop().animate({left:c},500);
    }

setInterval 함수를 만든다. 당연한 말이겠지만 슬라이드 이미지의 갯수와 불릿버튼의 갯수는 같아야한다.
slide (이미지)의 eq()와 pager button(불릿버튼)의 eq()를 변수로 지정하고 current=0 로 설정한 변수가 0 에서 부터 카운팅된다.
조건문 에서 current의 값이 slide의 갯수와 같아진다면 current는 0이 된다. (이는 이미지가 3이라면 current가 3을 넘어가게 된다면 슬라이드는 없는 공간을 계속 자동으로 슬라이드가 된다. 그러므로 이미지3개에 맞춰 다시 1번의 이미지로 돌아가게 하려는 조건문이다.)

function bulletMove1(i){
        if(current==i) return;
        let currentEl=slide.eq(current);
        let nextEl=slide.eq(i);
        currentEl.css('left','0').stop().animate({left:'-100%'},500);
        nextEl.css('left','100%').stop().animate({left:0},500);
        current=i;
    }
    function bulletMove2(i){
        if(current==i) return;
        let currentEl=slide.eq(current);
        let nextEl=slide.eq(i);
        currentEl.css('left','0').stop().animate({left:'100%'},500);
        nextEl.css('left','-100%').stop().animate({left:0},500);
        current=i;
    }
	pagerBtn.click(function(){
        let tg=$(this);
        let i=tg.index();
        pagerBtn.removeClass('on')
        tg.addClass('on')
        if(current>i){
            bulletMove2(i);
        }else{
            bulletMove1(i);
        }
    })

불릿 버튼을 클릭하면 슬라이드가 넘어가는 함수이다. 하지만 bulletMove1 와 bulletMove2 가 있는데 이는
' > ' 버튼을 누르면 이미지 슬라이드는 오른쪽에서 왼쪽으로 슬라이드 된다. 반대로 ' < ' 버튼을 누르면 이미지는 왼쪽에서 오른쪽으로 슬라이드가 되어야 prev가 되는 느낌을 주는데 그 효과를 주려고 2가지의 bulletMove 1, 2 를 만들어서 if조건문을 만들었다. bulletMove( i ) 의 i 가 current 보다 작을때 불릿 버튼을 클릭하면 왼쪽에서 오른쪽으로 슬라이드가 되는 move가 된다.