슬라이드 페이징 처리관련 문의 드립니다.

코딩 UI 아래와 같습니다.

좌우 하살표를 이용해 슬라이드 형태 페이징입니다.

코딩 구조는 아래와 같습니다.

일반적인 페이징 처리가 어려운 관계로 

페이징 처리를 해야 되는되요

만약 

total_count = 18

total_page = 2

page_row = 6

일 경우 어떻게 하면 좋은지 조언 구합니다.

<!-- 페이지1 -->

<div  class="active">

     <div>

        <ul>

           <!-- 데이터 -->

            <li></li>

            <li></li>

            <li></li>

            <li></li>

            <li></li>

            <li></li>

        </ul>

     <div/>

<!-- 페이징 -->

<div class="list-page-number section">

   <span> <em class="bold">1</em> / 2</span>

</div>

</div>

<!-- 페이지2 -->

<div  >

     <div>

        <ul>

           <!-- 데이터 -->

            <li></li>

            <li></li>

            <li></li>

            <li></li>

            <li></li>

            <li></li>

        </ul>

     <div/>

<!-- 페이징 -->

<div class="list-page-number section">

   <span> <em class="bold">2</em> / 2</span>

</div>

</div>

<!-- 좌우버튼 -->

<div class="tunning-page-control-btn">

<button class="carousel-control-prev" type="button" data-bs-target="#main-mall-03"

data-bs-slide="prev">

<span class="carousel-control-prev-icon" aria-hidden="true"></span>

<span class="visually-hidden">Previous</span>

</button>

<button class="carousel-control-next" type="button" data-bs-target="#main-mall-03"

data-bs-slide="next">

<span class="carousel-control-next-icon" aria-hidden="true"></span>

<span class="visually-hidden">Next</span>

</button>

</div>