Pagination

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam at ullamcorper mauris, vitae imperdiet tortor. Cras aliquet gravida lacus eu auctor

Default Pagination

Code Snippet To Achieve The Above Results

                                
<nav aria-label = "Page navigation example">
    <ul class = "pagination wdpk-pagination">
        <li class = "page-item"><a class = "page-link" href = "#">Previous</a></li>
        <li class = "page-item"><a class = "page-link" href = "#">1</a></li>
        <li class = "page-item"><a class = "page-link" href = "#">2</a></li>
        <li class = "page-item"><a class = "page-link" href = "#">3</a></li>
        <li class = "page-item"><a class = "page-link" href = "#">Next</a></li>
    </ul>
</nav>

                        

/* No Changes Made To Default Variables */

                        
/* No Changes Made To Default Javascript */

Assigning Different Icons

1
2
3

Code Snippet To Achieve The Above Results

                                
<nav aria-label = "Page navigation example">
    <ul class = "pagination wdpk-pagination">
        <li class = "page-item">
            <a class = "page-link" href = "#" aria-label = "Previous">
                <span aria-hidden = "true">&laquo;</span>
            </a>
        </li>
        <li class = "page-item"><a class = "page-link" href = "#">1</a></li>
        <li class = "page-item"><a class = "page-link" href = "#">2</a></li>
        <li class = "page-item"><a class = "page-link" href = "#">3</a></li>
        <li class = "page-item">
            <a class = "page-link" href = "#" aria-label = "Next">
                <span aria-hidden = "true">&raquo;</span>
            </a>
        </li>
    </ul>
</nav>

                        

/* No Changes Made To Default Variables */

                        
/* No Changes Made To Default Javascript */

Disabled and active states

Code Snippet To Achieve The Above Results

                                
<nav aria-label = "...">
    <ul class = "pagination wdpk-pagination">
        <li class = "page-item disabled">
            <a class = "page-link" href = "#" tabindex = "-1"
               aria-disabled = "true">Previous</a>
        </li>
        <li class = "page-item"><a class = "page-link" href = "#">1</a></li>
        <li class = "page-item active" aria-current = "page">
            <a class = "page-link" href = "#">2 <span class = "sr-only">(current)</span></a>
        </li>
        <li class = "page-item"><a class = "page-link" href = "#">3</a></li>
        <li class = "page-item">
            <a class = "page-link" href = "#">Next</a>
        </li>
    </ul>
</nav>

                        

/* No Changes Made To Default Variables */

                        
/* No Changes Made To Default Javascript */