본문 바로가기
  • purple-whale
LIBRARY/SLICK-SLIDE

Slick-slide : 슬라이드 일시정지 아이콘 만들기

by purple-whale 2021. 1. 29.

<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";
        }
    }
}

 

댓글