Swiper 커스텀 질문 있습니다!!!
관련링크
https://altools.co.kr/
122회 연결
본문
알툴즈 메인 페이지의 슬라이더의 페이지네이션 부분 어떻게 커스텀하나요..??
이미지 변경은 할줄알겠는데 위치 변경이나 좌우버튼, 페이지, 스탑 플레이 버튼 일렬로 정렬하고 싶은데 잘 되지않습니다... 알려주시면 감사하겠습니다!!
답변 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>
네? 여기는 그누보드... 알툴즈 사이트는 그래도 너무 관계가...
슬라이드 말습하시는것 같네요 ;;
답변을 작성하시기 전에 로그인 해주세요.
