Swiper 커스텀 질문 있습니다!!!

Swiper 커스텀 질문 있습니다!!!

QA

Swiper 커스텀 질문 있습니다!!!

답변 3

본문

알툴즈 메인 페이지의 슬라이더의 페이지네이션 부분 어떻게 커스텀하나요..??

이미지 변경은 할줄알겠는데 위치 변경이나 좌우버튼, 페이지, 스탑 플레이 버튼 일렬로 정렬하고 싶은데 잘 되지않습니다... 알려주시면 감사하겠습니다!!

 

2108687560_1693918275.2868.jpg

이 질문에 댓글 쓰기 :

답변 3


<style>
.blind {
    visibility: hidden;
}
.pagination {
    display: flex;
    align-items: center;
}
.pagination > * {
    margin: 0 10px;
}
.pagination button {
    width: 32px;
    height: 32px;
    cursor: pointer;
    border: 1px solid transparent;
    border-radius: 100%;
}
.pagination button#btnPrev {
    background: url("data:image/svg+xml,<svg width='32' height='32' viewBox='0 0 32 32' fill='none' xmlns='http://www.w3.org/2000/svg'><mask id='mask0_9314_29223' style='mask-type:alpha' maskUnits='userSpaceOnUse' x='0' y='0' width='32' height='32'><rect width='32' height='32' fill='%23D9D9D9'/></mask><g mask='url(%23mask0_9314_29223)'><path d='M16.8333 21L18 19.8333L14.1667 16L18 12.1667L16.8333 11L11.8333 16L16.8333 21Z' fill='%23333D4B'/></g></svg>") 0 0/100% auto no-repeat;
}
.pagination button#btnPlay {
    background: url("data:image/svg+xml,<svg width='32' height='32' viewBox='0 0 32 32' fill='none' xmlns='http://www.w3.org/2000/svg'><mask id='mask0_9314_29251' style='mask-type:alpha' maskUnits='userSpaceOnUse' x='0' y='0' width='32' height='32'><rect width='32' height='32' fill='%23D9D9D9'/></mask><g mask='url(%23mask0_9314_29251)'><path d='M13 19.7097L20 15.3548L13 11V19.7097Z' fill='%23333D4B'/></g></svg>") 0 0/100% auto no-repeat;
}
.pagination button#btnPause {
    background: url("data:image/svg+xml,<svg width='32' height='32' viewBox='0 0 32 32' fill='none' xmlns='http://www.w3.org/2000/svg'><mask id='mask0_9314_29243' style='mask-type:alpha' maskUnits='userSpaceOnUse' x='0' y='0' width='32' height='32'><rect width='32' height='32' fill='%23D9D9D9'/></mask><g mask='url(%23mask0_9314_29243)'><path d='M13 20H15V12H13V20ZM17 20H19V12H17V20Z' fill='%23333D4B'/></g></svg>") 0 0/100% auto no-repeat;
}
.pagination button#btnNext {
    background: url("data:image/svg+xml,<svg width='32' height='32' viewBox='0 0 32 32' fill='none' xmlns='http://www.w3.org/2000/svg'><mask id='mask0_9314_29235' style='mask-type:alpha' maskUnits='userSpaceOnUse' x='0' y='0' width='32' height='32'><rect width='32' height='32' fill='%23D9D9D9'/></mask><g mask='url(%23mask0_9314_29235)'><path d='M14.6667 20.6487L13.5 19.482L17.3333 15.6487L13.5 11.8153L14.6667 10.6487L19.6667 15.6487L14.6667 20.6487Z' fill='%23333D4B'/></g></svg>") 0 0/100% auto no-repeat;
}
.pagination button#btnPrev:hover, .pagination button#btnNext:hover {
    border: 1px solid #555;
}
</style>
<div class="pagination">
    <button id="btnPrev"><span class="blind">이전</span></button>
    <div>
        <span>1</span>
        <em>/</em>
        <span>3</span>
    </div>
    <button id="btnPlay"><span class="blind">일시정지</span></button>
    <button id="btnNext"><span class="blind">다음</span></button>
</div>
답변을 작성하시기 전에 로그인 해주세요.
QA 내용 검색
질문등록
전체 93
© SIRSOFT
현재 페이지 제일 처음으로