Swiper 커스텀 질문 있습니다!!! 채택완료

</p>

<p><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='<a href="http://www.w3.org/2000/svg'><mask" target="_blank" rel="noopener noreferrer">http://www.w3.org/2000/svg'><mask</a> 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='<a href="http://www.w3.org/2000/svg'><mask" target="_blank" rel="noopener noreferrer">http://www.w3.org/2000/svg'><mask</a> 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='<a href="http://www.w3.org/2000/svg'><mask" target="_blank" rel="noopener noreferrer">http://www.w3.org/2000/svg'><mask</a> 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='<a href="http://www.w3.org/2000/svg'><mask" target="_blank" rel="noopener noreferrer">http://www.w3.org/2000/svg'><mask</a> 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></p>

<p><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></p>

<p>