Pagination

Grove UI Framework UI Elements Pagination

Pagination

일련의 관련 콘텐츠가 여러 페이지에 존재함을 나타내기 위해 페이지 매김을 표시하는 데 사용합니다.

Types

Default

이전 1 2 3 4 5 다음

<div class="pagination" aria-label="Page Navigation"> <a href="javascript:void(0);" class="arr arr_text prev"><span>이전</span></a> <a href="javascript:void(0);" class="page_link active"><span>1</span></a> <a href="javascript:void(0);" class="page_link"><span>2</span></a> <a href="javascript:void(0);" class="page_link"><span>3</span></a> <a href="javascript:void(0);" class="page_link"><span>4</span></a> <a href="javascript:void(0);" class="page_link"><span>5</span></a> <a href="javascript:void(0);" class="arr arr_text next"><span>다음</span></a> </div>
소스 코드가 복사되었습니다.
Icons

이전 1 2 3 4 5 다음

<div class="pagination" aria-label="Page Navigation"> <a href="javascript:void(0);" class="arr prev"><span>이전</span></a> <a href="javascript:void(0);" class="page_link active"><span>1</span></a> <a href="javascript:void(0);" class="page_link"><span>2</span></a> <a href="javascript:void(0);" class="page_link"><span>3</span></a> <a href="javascript:void(0);" class="page_link"><span>4</span></a> <a href="javascript:void(0);" class="page_link"><span>5</span></a> <a href="javascript:void(0);" class="arr next"><span>다음</span></a> </div>
소스 코드가 복사되었습니다.

Disabled and active

Default

이전 1 2 3 4 5 다음

<div class="pagination" aria-label="Page Navigation"> <a href="javascript:void(0);" class="arr arr_text prev disabled"><span>이전</span></a> <a href="javascript:void(0);" class="page_link active"><span>1</span></a> <a href="javascript:void(0);" class="page_link"><span>2</span></a> <a href="javascript:void(0);" class="page_link"><span>3</span></a> <a href="javascript:void(0);" class="page_link"><span>4</span></a> <a href="javascript:void(0);" class="page_link"><span>5</span></a> <a href="javascript:void(0);" class="arr arr_text next"><span>다음</span></a> </div>
소스 코드가 복사되었습니다.
With Icons

이전 1 2 3 4 5 다음

<div class="pagination" aria-label="Page Navigation"> <a href="javascript:void(0);" class="arr prev disabled"><span>이전</span></a> <a href="javascript:void(0);" class="page_link active"><span>1</span></a> <a href="javascript:void(0);" class="page_link"><span>2</span></a> <a href="javascript:void(0);" class="page_link"><span>3</span></a> <a href="javascript:void(0);" class="page_link"><span>4</span></a> <a href="javascript:void(0);" class="page_link"><span>5</span></a> <a href="javascript:void(0);" class="arr next"><span>다음</span></a> </div>
소스 코드가 복사되었습니다.

Usage

Numbers

1 5

<div class="pagination_number"> <span class="pagination_number_current">1</span> <span class="pagination_number_total">5</span> </div>
소스 코드가 복사되었습니다.
Swiper

<div id="mySwiper-01" class="swiper-container"> <div class="swiper-wrapper"> <div class="swiper-slide">....</div> </div> <div class="swiper-pagination"></div> </div>  <link rel="stylesheet" href="../resources/css/swiper.min.css">  <script src="../resources/js/swiper.min.js"></script> <script> var mySwiper01 = new Swiper('#mySwiper-01', { //swiper pagination pagination:{ el:'#mySwiper-01 .swiper-pagination', } }) </script>
소스 코드가 복사되었습니다.