LIBRARY/SLICK-SLIDE
Slick-slide : 슬라이드 일시정지 아이콘 만들기
purple-whale
2021. 1. 29. 21:04
<div class="slide-btn-wrap">
<button class="slide-btn-pause slide-play"><span class="blind">시작</span></button>
<button class="slide-btn-pause slide-pause"><span class="blind">정지</span></button>
</div>
버튼을 감싸는 div를 만들어 위치를 조정하면 편하게 이동할 수 있습니다.
.slide-btn-wrap {
position: absolute;
bottom: 30px;
left: 50%;
transform: translateX(60px);
.slide-btn-pause {
color: $wh;
text-shadow: 1px 1px 3px rgba($bk, 0.6);
font-family: 'Line Awesome Free';
font-weight: 900;
font-size: 3.5em;
&:hover {
color: $pt;
}
}
.slide-play {
&::before {
content: "\f144";
}
}
.slide-pause {
&::before {
content: "\f28b";
}
}
}