PAGINATION

Swavy UI pagination is used to organize pages in a webpage

DEFAULT PAGINATION

                    
<nav class="sw_pagination sw_pagination-small">
    <ul class="sw_pagination-wrapper">
        <li class="sw_pagination-list"><a href="" class="sw_pagination-link">Previous</a></li>
        <li class="sw_pagination-list"><a href="" class="sw_pagination-link sw_active">1</a></li>
        <li class="sw_pagination-list"><a href="" class="sw_pagination-link">2</a></li>
        <li class="sw_pagination-list"><a href="" class="sw_pagination-link">3</a></li>
        <li class="sw_pagination-list"><a href="" class="sw_pagination-link">4</a></li>
        <li class="sw_pagination-list"><a href="" class="sw_pagination-link">Next</a></li>
    </ul>
</nav>

<nav class="sw_pagination sw_mtb-3">
    <ul class="sw_pagination-wrapper">
        <li class="sw_pagination-list active"><a href="" class="sw_pagination-link">Previous</a></li>
        <li class="sw_pagination-list"><a href="" class="sw_pagination-link">1</a></li>
        <li class="sw_pagination-list"><a href="" class="sw_pagination-link sw_active">2</a></li>
        <li class="sw_pagination-list"><a href="" class="sw_pagination-link">3</a></li>
        <li class="sw_pagination-list"><a href="" class="sw_pagination-link">4</a></li>
        <li class="sw_pagination-list"><a href="" class="sw_pagination-link">Next</a></li>
    </ul>
</nav>

<nav class="sw_pagination sw_pagination-large">
    <ul class="sw_pagination-wrapper">
        <li class="sw_pagination-list active"><a href="" class="sw_pagination-link">Previous</a></li>
        <li class="sw_pagination-list"><a href="" class="sw_pagination-link">1</a></li>
        <li class="sw_pagination-list"><a href="" class="sw_pagination-link">2</a></li>
        <li class="sw_pagination-list"><a href="" class="sw_pagination-link sw_active">3</a></li>
        <li class="sw_pagination-list"><a href="" class="sw_pagination-link">4</a></li>
        <li class="sw_pagination-list"><a href="" class="sw_pagination-link">Next</a></li>
    </ul>
</nav>

<nav class="sw_pagination sw_pagination-larger sw_mt-3">
    <ul class="sw_pagination-wrapper">
        <li class="sw_pagination-list active"><a href="" class="sw_pagination-link">Previous</a></li>
        <li class="sw_pagination-list"><a href="" class="sw_pagination-link">1</a></li>
        <li class="sw_pagination-list"><a href="" class="sw_pagination-link">2</a></li>
        <li class="sw_pagination-list"><a href="" class="sw_pagination-link">3</a></li>
        <li class="sw_pagination-list"><a href="" class="sw_pagination-link sw_active">4</a></li>
        <li class="sw_pagination-list"><a href="" class="sw_pagination-link">Next</a></li>
    </ul>
</nav>



                

PAGINATION WITH ALIGNMENT

                    
<nav class="sw_pagination sw_pagination-center panel_collapse">
    <ul class="sw_pagination-wrapper">
        <li class="sw_pagination-list"><a href="" class="sw_pagination-link"><i class="fa-solid fa-angles-left"></i>
</a></li>
        <li class="sw_pagination-list"><a href="" class="sw_pagination-link sw_active">1</a></li>
        <li class="sw_pagination-list"><a href="" class="sw_pagination-link">2</a></li>
        <li class="sw_pagination-list"><a href="" class="sw_pagination-link">3</a></li>
        <li class="sw_pagination-list"><a href="" class="sw_pagination-link">4</a></li>
        <li class="sw_pagination-list"><a href="" class="sw_pagination-link"><i class="fa-solid fa-angles-right"></i>
</a></li></a></li>
    </ul>
</nav>

<nav class="sw_pagination sw_pagination-right sw_rsq-6">
    <ul class="sw_pagination-wrapper">
        <li class="sw_pagination-list"><a href="" class="sw_pagination-link"><i class="fa-solid fa-angles-left"></i>
</a></li>
        <li class="sw_pagination-list"><a href="" class="sw_pagination-link sw_active">1</a></li>
        <li class="sw_pagination-list"><a href="" class="sw_pagination-link">2</a></li>
        <li class="sw_pagination-list"><a href="" class="sw_pagination-link">3</a></li>
        <li class="sw_pagination-list"><a href="" class="sw_pagination-link">4</a></li>
        <li class="sw_pagination-list"><a href="" class="sw_pagination-link"><i class="fa-solid fa-angles-right"></i>
</a></li></a></li>
    </ul>
</nav>