JSFiddle - React, Tailwind, and code Playground

by bvotcode

HTML

<div class="pagination">
     <div class="w3-row w3-grayscale-min" style="margin-top:0px">
    <div class="w3-half">
      <img src="https://i.imgur.com/XQbTgb6.png" style="width:100%" onclick="onClick(this)" alt="1">
      <img src="https://i.imgur.com/XQbTgb6.png" style="width:100%" onclick="onClick(this)" alt="2">
    
   </div>
    
   <div class="w3-half">
      <img src="https://i.imgur.com/XQbTgb6.png" style="width:100%" onclick="onClick(this)" alt="3">
      <img src="https://i.imgur.com/XQbTgb6.png" style="width:100%" onclick="onClick(this)" alt="4">
        </div>
</div>
  </div>

CSS

/* Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400;500;600;700&display=swap');
*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: "Poppins", sans-serif;
}
body {
    display: flex;
    align-items: center;
    justify-content: center;
    background: #0f4ce4;
    min-height: 100vh;
    padding: 10px;
}
.pagination ul {
width: 100%;
display: flex;
flex-wrap: wrap;
background: #fff;
padding: 8px;
border-radius: 50px;
box-shadow: 0px 10px 15px rgba(0,0,0,0.1);
}
.pagination ul li {
    color: #0f4ce4;
    list-style: none;
    line-height: 45px;
    text-align: center;
    font-size: 18px;
    font-weight: 500;
    cursor: pointer;
    user-select: none;
    transition: all 0.3s ease;
}
.pagination ul li.numb{
    list-style: none;
    height: 45px;
    width: 45px;
    margin: 0 3px;
    line-height: 45px;
    border-radius: 50%;
}
.pagination ul li.numb.first {
    margin: 0px 3px 0 -5px;
}
.pagination ul li.numb.last{
    margin: 0px -5px 0 3px;
}
.pagination ul li.dots {
    font-size: 22px;
    cursor: default;
}
.pagination ul li.btn{
    padding: 0 20px;
    border-radius: 50px;
}
.pagination li.active,
.pagination ul li.numb:hover,
.pagination li:first-child:hover,
.pagination ul li:last-child:hover{
    color: #fff;
    background: #0f4ce4;
}

JavaScript

// selecting required element
const element = document.querySelector(".pagination ul");
let totalPages = 20;
let page = 10;

//calling function with passing parameters and adding inside element which is ul tag
element.innerHTML = createPagination(totalPages, page);
function createPagination(totalPages, page){
  let liTag = '';
  let active;
  let beforePage = page - 1;
  let afterPage = page + 1;
  if(page > 1){ //show the next button if the page value is greater than 1
    liTag += `<li class="btn prev" onclick="createPagination(totalPages, ${page - 1})"><span><i class="fas fa-angle-left"></i> Prev</span></li>`;
  }

  if(page > 2){ //if page value is less than 2 then add 1 after the previous button
    liTag += `<li class="first numb" onclick="createPagination(totalPages, 1)"><span>1</span></li>`;
    if(page > 3){ //if page value is greater than 3 then add this (...) after the first li or page
      liTag += `<li class="dots"><span>...</span></li>`;
    }
  }

  // how many pages or li show before the current li
  if (page == totalPages) {
    beforePage = beforePage - 2;
  } else if (page == totalPages - 1) {
    beforePage = beforePage - 1;
  }
  // how many pages or li show after the current li
  if (page == 1) {
    afterPage = afterPage + 2;
  } else if (page == 2) {
    afterPage  = afterPage + 1;
  }

  for (var plength = beforePage; plength <= afterPage; plength++) {
    if (plength > totalPages) { //if plength is greater than totalPage length then continue
      continue;
    }
    if (plength == 0) { //if plength is 0 than add +1 in plength value
      plength = plength + 1;
    }
    if(page == plength){ //if page is equal to plength than assign active string in the active variable
      active = "active";
    }else{ //else leave empty to the active variable
      active = "";
    }
    liTag += `<li class="numb ${active}" onclick="createPagination(totalPages, ${plength})"><span>${plength}</span></li>`;
  }

  if(page < totalPages - 1){ //if page...