카카오톡 슬라이드의 이전/다음버튼, 네비게이션, 자동재생 기능 구현해보기!
학원 평가시간에 만들어본 기능인데 앞으로 자주 사용할 것 같아서 기록으로 남겨본다 :)
HTML
- 슬라이드 컨테이너의 position 기준을 어느 부모로 잡을지 생각해볼 것
<body>
<div id="wrap">
<h1 class="text-center">카카오 슬라이드</h1>
<div id="slides">
<a href="#" class="slides-previous">이전버튼</a>
<a href="#" class="slides-next">다음버튼</a>
<ul class="slides-nav">
<li class="on"><a href="#">무료채팅</a></li>
<li><a href="#">보이스톡&페이스톡</a></li>
<li><a href="#">샵 검색</a></li>
<li><a href="#">톡게시판</a></li>
<li><a href="#">오픈채팅</a></li>
<li><a href="#">채널 탭</a></li>
</ul>
<div class="slides-img">
<ul class="slides-container">
<li><a href="#">무료채팅</a></li>
<li><a href="#">보이스톡&페이스톡</a></li>
<li><a href="#">샵 검색</a></li>
<li><a href="#">톡게시판</a></li>
<li><a href="#">오픈채팅</a></li>
<li><a href="#">채널 탭</a></li>
</ul>
</div>
</div>
</div>
</body>CSS
- [ 슬라이드 컨테이너 ]는 부모를 기준으로 position하여
left:0;으로 위치시켜주어야 이동 시 첫번째 슬라이드가 움직이지 않는다. top:0;값은 기준점인 부모를 슬라이드 이미지 사이즈로 지정해줬기 때문에 넣어주었다.- 마지막까지 헤맸던 부분은 js를 구현할 때 네비게이션의 hover가 같이 실행되지 않는 것이었다. 이것은 각 슬라이드의 hover 시 실행값이 클래스 on이 되었을 때도 함께 실행되도록 하여 해결해 주었다. (js에서 현재 클릭한 인덱스에 클래스 on을 옮겨줄 것이기 때문에)
<style>
h1{
color:rgb(117, 117, 117);
}
#slides{
position: relative;
margin: 0 auto;
width: 700px;
height: 528px;
}
/* 이전,다음버튼 */
#slides>a{
display: block;
position: absolute;
top: 280px;
width: 44px;
height: 44px;
text-indent: -9999px;
}
#slides>a:nth-of-type(1){
left: 0;
background-image: url(./../images/img_talk_button.png);
background-position: 0 0;
}
#slides>a:nth-of-type(1):hover{
background-position: -70px 0;
}
#slides>a:nth-of-type(2){
right: 0;
background-image: url(./../images/img_talk_button.png);
background-position: 0 -70px;
}
#slides>a:nth-of-type(2):hover{
background-position: -70px -70px;
}
/* 슬라이드 네비게이션 */
#slides>.slides-nav{
display: flex;
margin: 0 auto;
width: 480px;
}
#slides>.slides-nav>li{
width: 80px;
}
#slides>.slides-nav>li:nth-of-type(1){
background-image: url(./../images/btn_talk.png);
background-position: 0 0;
}
#slides>.slides-nav>li:nth-of-type(1).on,
#slides>.slides-nav>li:nth-of-type(1):hover{background-position:0 -90px;}
#slides>.slides-nav>li:nth-of-type(2){
background-image: url(./../images/btn_talk.png);
background-position: -80px 0;
}
#slides>.slides-nav>li:nth-of-type(2).on,
#slides>.slides-nav>li:nth-of-type(2):hover{background-position:-80px -90px;}
#slides>.slides-nav>li:nth-of-type(3){
background-image: url(./../images/btn_talk.png);
background-position: -160px 0;
}
#slides>.slides-nav>li:nth-of-type(3).on,
#slides>.slides-nav>li:nth-of-type(3):hover{background-position:-160px -90px;}
#slides>.slides-nav>li:nth-of-type(4){
background-image: url(./../images/btn_talk.png);
background-position: -240px 0;
}
#slides>.slides-nav>li:nth-of-type(4).on,
#slides>.slides-nav>li:nth-of-type(4):hover{background-position:-240px -90px;}
#slides>.slides-nav>li:nth-of-type(5){
background-image: url(./../images/btn_talk.png);
background-position: -320px 0;
}
#slides>.slides-nav>li:nth-of-type(5).on,
#slides>.slides-nav>li:nth-of-type(5):hover{background-position:-320px -90px;}
#slides>.slides-nav>li:nth-of-type(6){
background-image: url(./../images/btn_talk.png);
background-position: -400px 0;
}
#slides>.slides-nav>li:nth-of-type(6).on,
#slides>.slides-nav>li:nth-of-type(6):hover{background-position:-400px -90px;}
#slides>.slides-nav>li>a{
display: block;
height: 90px;
text-indent: -9999px;
}
/* 슬라이드 컨테이너 */
#slides>.slides-img{
overflow: hidden;
position: relative;
margin: 30px auto;
width: 478px;
height: 438px;
}
/* left를 0을 주어야 js에서 컨테이너 이동할때 첫번째 슬라이드가 이동하지 않는다! */
#slides>.slides-img>.slides-container{
display: flex;
position: absolute;
left: 0;
top: 0;
width: 2868px;
}
#slides>.slides-img>.slides-container>li{
width: 478px;
}
#slides>.slides-img>.slides-container>li:nth-of-type(1){background-image: url(./../images/img_talk_cont1.png);}
#slides>.slides-img>.slides-container>li:nth-of-type(2){background-image: url(./../images/img_talk_cont2.png);}
#slides>.slides-img>.slides-container>li:nth-of-type(3){background-image: url(./../images/img_talk_cont3.png);}
#slides>.slides-img>.slides-container>li:nth-of-type(4){background-image: url(./../images/img_talk_cont4.png);}
#slides>.slides-img>.slides-container>li:nth-of-type(5){background-image: url(./../images/img_talk_cont5.png);}
#slides>.slides-img>.slides-container>li:nth-of-type(6){background-image: url(./../images/img_talk_cont6.png);}
#slides>.slides-img>.slides-container>li>a{
display: block;
height: 438px;
text-indent: -9999px;
}
</style>jQuery
- 컨테이너 이동 함수와 자동실행 함수를 선언하고 각각 실행하고자 하는 이벤트를 구현해준다.
- 반복되는 오른쪽방향 인덱스도 nextIdx 함수로 선언하여 사용해주었다.
<script>
$(function(){
const $container = $('#slides>.slides-img>.slides-container');
const $slidesNav = $('#slides>.slides-nav>li>a');
const $btnPrev = $('#slides>a').eq(0);
const $btnNext = $('#slides>a').eq(1);
let nowIdx = 0;
let intervalkey = '';
// 함수선언
function moveFn(){
//활성화
$slidesNav.eq(nowIdx).parent().addClass('on').siblings().removeClass('on');
//이동
$container.stop().animate({
left : -478 * nowIdx
},400,"easeInOutCubic");
}
// 오른쪽방향 인덱스 함수
function nextIdx(){
if(nowIdx<5){
nowIdx++;
}else{
nowIdx=0;
}
}
// 자동실행 함수
function autoPlay(){
intervalkey = setInterval(function(){
nextIdx();
moveFn();
},3000);
}
// 이벤트 구문
$slidesNav.on('click',function(evt){
evt.preventDefault();
nowIdx = $slidesNav.index(this);
moveFn();
});
// 이전버튼
$btnPrev.on('click',function(evt){
evt.preventDefault();
if(nowIdx>0){
nowIdx--;
}else{
nowIdx=5;
}
moveFn();
});
// 다음버튼
$btnNext.on('click',function(evt){
evt.preventDefault();
nextIdx();
moveFn();
});
// 자동실행
$(window).on('load',function(){
clearInterval();
autoPlay();
});
});
</script>
가치와 의미를 쫓는 개발자 되기✨