Hello Guys, In this article or video we will see Amazing Working Pagination UI Design Using Html CSS & jQuery. You will use this Amazing Working Pagination UI Design on your website freely. If you learn How to create this Amazing Working Pagination UI Design so watch my video from YouTube or bellow. And you wish to learn more amazing HTML, CSS and JavaScript Effect or Tutorial so Subscribe my YouTube Channel Pure Coding and Stay with this website.
Watch Video
--------------------
Source Code
--------------------
First add this code on index.html file:
HTML:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/
4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" type="text/css" href="style.css">
<title>Working Pagination UI Design - Pure Coding</title>
</head>
<body>
<ul class="pagination">
<li class="first">
<a href="#"><i class="fa fa-angle-double-left"></i></a>
</li>
<li class="prev"><a href="#"><i class="fa fa-angle-left"></i></a></li>
<li class="pageNumber active"><a href="#">1</a></li>
<li class="pageNumber"><a href="#">2</a></li>
<li class="pageNumber"><a href="#">3</a></li>
<li class="pageNumber"><a href="#">4</a></li>
<li class="pageNumber"><a href="#">5</a></li>
<li class="next"><a href="#"><i class="fa fa-angle-right"></i></a></li>
<li class="last">
<a href="#"><i class="fa fa-angle-double-right"></i></a>
</li>
</ul>
<script src="https://code.jquery.com/jquery-3.5.1.js"></script>
<script>
$(document).ready(function(){
$('.next').click(function(){
$('.pagination').find('.pageNumber.active').next().addClass('active');
$('.pagination').find('.pageNumber.active').prev().removeClass('active');
});
$('.prev').click(function(){
$('.pagination').find('.pageNumber.active').prev().addClass('active');
$('.pagination').find('.pageNumber.active').next().removeClass('active');
});
$('.first').click(function(){
$('.pagination').find('.pageNumber.active').removeClass('active');
$('.pagination').find('.pageNumber').first().addClass('active');
});
$('.last').click(function(){
$('.pagination').find('.pageNumber.active').removeClass('active');
$('.pagination').find('.pageNumber').last().addClass('active');
});
$('.pageNumber').click(function(){
$('.pagination').find('.pageNumber.active').removeClass('active');
$(this).addClass('active');
});
});
</script>
</body>
</html>
Then add this code on style.css file:
CSS:
@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;
0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;
1,800;1,900&display=swap');
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Poppins', sans-serif;
}
body {
width: 100%;
min-height: 100vh;
background: #26de81;
display: flex;
justify-content: center;
align-items: center;
}
.pagination {
width: auto;
height: 50px;
display: flex;
justify-content: center;
align-items: center;
list-style: none;
background: #FFF;
}
.pagination li {
margin: 0 5px;
}
.pagination li a {
padding: 10px 20px;
text-decoration: none;
color: #333;
}
.pagination li.first a, .pagination li.prev a, .pagination li.next a,
.pagination li.last a, .pagination li.pageNumber.active a {
background: #26de81;
color: #FFF;
}
