slider custom

✨ slider custom

안녕하세요 TriplexLab 입니다.
오늘은 제가 slider를 응용해서 만든 slider custom에 관해서 살펴보도록 하겠습니다 :)

저도 이 슬라이스 애니메이션은 웹써칭을 하다가 우연히 발견한 애니메이션 입니다.

✍️ slider custom 코드

<div class="content">
        <section class="about-slide">
            <div class="about-slide-wrap">
                <ul class="bg-slide">
                    <li class="slide-item" style="z-index: 12;"><img src="images/img_slide_01.jpg" alt=""></li>
                    <li class="slide-item" style="z-index: 11;"><img src="images/img_slide_02.jpg" alt=""></li>
                    <li class="slide-item" style="z-index: 10;"><img src="images/img_slide_03.jpg" alt=""></li>
                </ul>

                <ul class="icon-slide">
                    <li class="icon-item" style="z-index: 12;">
                        <img src="images/img_slide_01.jpg" alt="">
                        <p class="tit_inner">
                            <span class="tit">TriplexLab</span>
                            <img src="./logo.svg" alt="logo">
                        </p>
                    </li>
                    <li class="icon-item" style="z-index: 11;">
                        <img src="images/img_slide_02.jpg" alt="">
                        <p class="tit_inner">
                            <span class="tit">Front Developer</span>
                            <img src="./logo.svg" alt="logo">
                        </p>
                    </li>
                    <li class="icon-item" style="z-index: 10;">
                        <img src="images/img_slide_03.jpg" alt="">
                        <p class="tit_inner">
                            <span class="tit">Blog</span>
                            <img src="./logo.svg" alt="logo">
                        </p>
                    </li>
                </ul>
            </div>
        </section>
    </div>

* {
 margin: 0; padding: 0;
 list-style: none;
 }
 @keyframes slidein {
 0% {left: 45%;opacity: 0;}
 100% {left: 50%;opacity: 1;}
 }

@keyframes slidein2 {
0% {right: 45%;opacity: 0;}
100% {right: 50%;opacity: 1;}
}

.content {
max-width: 1200px;
margin: 0 auto;
position: relative;
}
.about-slide {
position: relative;
overflow: hidden;
width: 100%;
height: 580px;
}
.about-slide .about-slide-wrap {
position: relative;
width: 100%;
}
.about-slide ul.bg-slide {
width: 100%;
height: 580px;
}
.about-slide ul.bg-slide li {
position: absolute;
width: 100%;
height: 580px;
}
.about-slide ul.bg-slide img {
height: 580px;
width: auto;
position: absolute;
left: 50%;
top: 0;
margin-left: -720px;
}

.about-slide .icon-slide {
position: absolute;
left: 50%;
top: 50%;
margin: -240px 0 0 -240px;
width: 480px;
height: 480px;
}
.about-slide .icon-slide li {
overflow: hidden;
position: absolute;
left: 0;
top: 0;
width: 480px;
height: 480px;
border-radius: 50%;
}
.about-slide .icon-slide li>img {
position: absolute;
right: 50%;
top: 50%;
transform: translate(50%, -50%);
}

.about-slide .icon-slide li .tit_inner {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
text-align: center;
color: #fff;
}
.about-slide .icon-slide li .tit_inner .tit {
position: absolute;
left: 50%;
top: 50%;
font-size: 22px;
font-weight: 600;
transform: translate(-50%, 140px);
}
.about-slide .icon-slide li .tit_inner img {width: 140px; position:absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);}

.about-slide .bg-slide .slide-item {opacity: 0;}
.about-slide .bg-slide .slide-item.active {opacity: 1;}
.about-slide .bg-slide .slide-item.active > img {animation: slidein 1.5s ease;}

.about-slide .icon-slide .icon-item {opacity: 0;}
.about-slide .icon-slide .icon-item.active {opacity: 1;}
.about-slide .icon-slide .icon-item.active > img {animation: slidein2 1s ease;}

 const bg = document.querySelector('.bg-slide');
 const icon_slide = document.querySelector('.icon-slide');
 const items = Array.from(document.querySelectorAll('.slide-item'));
 const icon_item = Array.from(document.querySelectorAll('.icon-item'));
 let current;
 let n = 0;

const add = function(el) {
	el.classList.add('active');
	current = el;
};

const remove = function(el) {
	current && el.classList.remove('active');
};

const addHander = function() {
	remove(items[n]);
	remove(icon_item[n]);
	n += 1;
	if(items.length === n) n = 0;
	add(items[n]);
	add(icon_item[n]);
};
add(items[0]);
add(icon_item[0]);
setInterval(addHander, 2500);

📗 slider_custom 설명

2.5초마 마다 자동으로 마크업에 있는 li 태그의 항목에 active 클래스를 추가 합니다.
active의 속성을 css에서 컨트롤 합니다.
그리고 img 태그에 animation keyframe를 사용하여 방향을 컨트롤 합니다. 

👉전체 소스코드

전체 소스코드를 github에도 공유합니다.😃🔥👍

GitHub - younhoso/younhoso