[ RESPONSIVE ] 20 이미지 슬라이드

[ RESPONSIVE ] 20 이미지 슬라이드

 

 

See the Pen [ RESPONSIVE ] 20 이미지 슬라이드 by larmong (@larmong) on CodePen.

 

 

 

 

 

 

GitHub에서 보기 Click!

 

 

---

 

 

* 슬라이드 안에 글씨 안보이다가 슬라이드가 작동하면서 active되면 보이는 효과

(첫번째 줄, 두번째 줄 시간 차로 오른쪽에서 왼쪽으로 보이게 함)

.slider figure { position: relative; }
.slider figcaption {
    position: absolute; bottom: 0; left: 0;
    width: 100%; padding: 20px;
    box-sizing: border-box;
    background-color: rgba(0,0,0,0.5);
    color: #fff;
    font-size: 18px;
}
.slider figcaption em {
    display: block; font-weight: bold; font-size: 28px;
    text-transform: uppercase; font-family: 'Abel', sans-serif;
    opacity: 0;
    transition: all .84s ease;
    transform: translateX(50px);
}
.slider figcaption span {
    display: block;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    opacity: 0;
    transition: all .84s 0.2s ease;
    transform: translateX(50px);
}
.slider .slick-active figcaption em { opacity: 1; transform: translateX(0); }
.slider .slick-active figcaption span { opacity: 1; transform: translateX(0); }

 

* 슬라이드 플러그인 사용해서 만들때 버튼 이미지를 불러 올 수 없을 때 가상요소 사용해서 불러오기

.slider .slick-prev {
    position: absolute; left: 0; bottom: 0; z-index: 0;
    width: 30px; height: 30px;
    display: inline-block;
    text-indent: -9999px;
    font: normal normal normal 14px/1 FontAwesome;
}
.slider .slick-prev::before {
    content: '\f053';
    color: #5dbfed;
    text-indent: 0;
    position: absolute; left: 9px; top: 8px;
}
.slider .slick-next {
    position: absolute; right: 0; bottom: 0; z-index: 0;
    width: 30px; height: 30px;
    display: inline-block;
    text-indent: -9999px;
    font: normal normal normal 14px/1 FontAwesome;
}
.slider .slick-next::before {
    content: '\f054';
    color: #5dbfed;
    text-indent: 0;
    position: absolute; left: 11px; top: 8px;
}

 

 

 

 

---

 

 

 

* 반응형 사이트 강의 보는곳(WEBSTORYBOY) click!