next/previous button activate on pagination using jquery

user_18011189 0
Viewed 66

I have pagination, I'm not getting how to activate the next/previous icon when clicking on it. Currently, if I click on the numbers, it shows the respective page. Please help to show the pages when clicked on next & previous buttons and also how to disable next & previous icons if the page is on first & last page respectively. Please help. Below is my code

$(document).ready(function(){   

                let pageSize = 2;
              let pageCount = Math.ceil($('.content').length / 2);

              let showPage = function(page) {
                let start = pageSize * (page - 1);
                let end = pageSize * page;
                $(".content").hide().slice(start, end).show();
                
                $('#prev a').toggleClass('disabled', page <= 1);
                $('#next a').toggleClass('disabled', page >= pageCount);
              }

              showPage(1);

              $("#pagin li a").click(function() {
                $("#pagin li a").removeClass("current");
                $(this).addClass("current");
                showPage(parseInt($(this).text()))
              });
                          
            });
.content {
    margin: 1px;
    width: 100px;
    height: 100px;
    border: 1px solid black;
    float: left;
    background-color: gray;
}

#pagin {
    clear: both;
    padding:0;
    width:500px;
    margin:0 auto;
}
#pagin li {
    float:left;
    margin-right:10px;
}
#pagin li a {
    display:block;
    color:#717171;
    font:bold 11px;
    text-shadow:0px 1px white;
    padding:5px 8px;
    -webkit-border-radius:3px;
    -moz-border-radius:3px;
    border-radius:3px;
    -webkit-box-shadow:0px 1px 3px 0px rgba(0,0,0,0.35);
    -moz-box-shadow:0px 1px 3px 0px rgba(0,0,0,0.35);
    box-shadow:0px 1px 3px 0px rgba(0,0,0,0.35);
    background:#f9f9f9;
    background:-webkit-linear-gradient(top,#f9f9f9 0%,#e8e8e8 100%);
    background:-moz-linear-gradient(top,#f9f9f9 0%,#e8e8e8 100%);
    background:-o-linear-gradient(top,#f9f9f9 0%,#e8e8e8 100%);
    background:-ms-linear-gradient(top,#f9f9f9 0%,#e8e8e8 100%);
    background:linear-gradient(top,#f9f9f9 0%,#e8e8e8 100%);
    filter:progid:DXImageTransform.Microsoft.gradient( startColorstr='#f9f9f9',endColorstr='#e8e8e8',GradientType=0 );
}
#pagin li a.current {
    color:white;
    text-shadow:0px 1px #3f789f;
    -webkit-box-shadow:0px 1px 2px 0px rgba(0,0,0,0.8);
    -moz-box-shadow:0px 1px 2px 0px rgba(0,0,0,0.8);
    box-shadow:0px 1px 2px 0px rgba(0,0,0,0.8);
    background:#7cb9e5;
    background:-webkit-linear-gradient(top,#7cb9e5 0%,#57a1d8 100%);
    background:-moz-linear-gradient(top,#7cb9e5 0%,#57a1d8 100%);
    background:-o-linear-gradient(top,#7cb9e5 0%,#57a1d8 100%);
    background:-ms-linear-gradient(top,#7cb9e5 0%,#57a1d8 100%);
    background:linear-gradient(top,#7cb9e5 0%,#57a1d8 100%);
    filter:progid:DXImageTransform.Microsoft.gradient( startColorstr='#7cb9e5',endColorstr='#57a1d8',GradientType=0 );
}
#pagin li a.disabled {
  pointer-events: none;
  opacity: 0.4;
}

#pagin li a:hover {
    -webkit-box-shadow:0px 1px 3px 0px rgba(0,0,0,0.55);
    -moz-box-shadow:0px 1px 3px 0px rgba(0,0,0,0.55);
    box-shadow:0px 1px 3px 0px rgba(0,0,0,0.55);
    background:#fff;
    background:-webkit-linear-gradient(top,#fff 0%,#e8e8e8 100%);
    background:-moz-linear-gradient(top,#fff 0%,#e8e8e8 100%);
    background:-o-linear-gradient(top,#fff 0%,#e8e8e8 100%);
    background:-ms-linear-gradient(top,#fff 0%,#e8e8e8 100%);
    background:linear-gradient(top,#fff 0%,#e8e8e8 100%);
    filter:progid:DXImageTransform.Microsoft.gradient( startColorstr='#fff',endColorstr='#e8e8e8',GradientType=0 );
}
#pagin li a:active,#pagin li a.current:active {
    -webkit-box-shadow:inset 0px 1px 3px 0px rgba(0,0,0,0.5),0px 1px 1px 0px rgba(255,255,255,1) !important;
    -moz-box-shadow:inset 0px 1px 3px 0px rgba(0,0,0,0.5),0px 1px 1px 0px rgba(255,255,255,1) !important;
    box-shadow:inset 0px 1px 3px 0px rgba(0,0,0,0.5),0px 1px 1px 0px rgba(255,255,255,1) !important;
}
#pagin li a.current:hover {
    -webkit-box-shadow:0px 1px 2px 0px rgba(0,0,0,0.9);
    -moz-box-shadow:0px 1px 2px 0px rgba(0,0,0,0.9);
    box-shadow:0px 1px 2px 0px rgba(0,0,0,0.9);
    background:#99cefc;
    background:-webkit-linear-gradient(top,#99cefc 0%,#57a1d8 100%);
    background:-moz-linear-gradient(top,#99cefc 0%,#57a1d8 100%);
    background:-o-linear-gradient(top,#99cefc 0%,#57a1d8 100%);
    background:-ms-linear-gradient(top,#99cefc 0%,#57a1d8 100%);
    background:linear-gradient(top,#99cefc 0%,#57a1d8 100%);
    filter:progid:DXImageTransform.Microsoft.gradient( startColorstr='#99cefc',endColorstr='#57a1d8',GradientType=0 );
}
li{list-style-type:none;}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="page-container" data-page="1">
  <div class="content">1 I have some content</div>
  <div class="content">2 I have some content</div>
  <div class="content">3 I have some content</div>
  <div class="content">4 I have some content</div>
  <div class="content">5 I have some content</div>
  <div class="content">6 I have some content</div>
  <div class="content">7 I have some content</div>
  <div class="content">8 I have some content</div>
  <div class="content">9 I have some content</div>
  <div class="content">10 I have some content</div>
  <div class="content">11 I have some content</div>
  <div class="content">12 I have some content</div>
  <div class="content">13 I have some content</div>
  <div class="content">14 I have some content</div>
  <div class="content">15 I have some content</div>
  <div class="content">16 I have some content</div>
  <div class="content">17 I have some content</div>
  <div class="content">18 I have some content</div>
  <div class="content">19 I have some content</div>
  <div class="content">20 I have some content</div>
  <div class="content">21 I have some content</div>
  <div class="content">22 I have some content</div>
  <div class="content">23 I have some content</div>
  <div class="content">24 I have some content</div>
</div>
<div  id="pagin">
<ul>
  <li>
    <a href="#" id="prev">
      <svg width="8" height="12" viewBox="0 0 8 12" fill="none" xmlns="http://www.w3.org/2000/svg">
        <path fill-rule="evenodd" clip-rule="evenodd" d="M7.15493e-08 6L6 12L7.41 10.59L2.83 6L7.41 1.41L6 7.15493e-08L7.15493e-08 6Z" fill="#212934"/>
      </svg>
    </a>
  </li>
  <li class=""><a class="page current" href="#">1</a></li>
  <li class=""><a class="page" href="#">2</a></li>
  <li class=""><a class="page" href="#">3</a></li>  
  <li class=""><a class="page" href="#">4</a></li>
  <li class=""><a class="page" href="#">5</a></li>
  <li class=""><a class="page" href="#">6</a></li>
  <li class=""><a class="page" href="#">7</a></li>
   <li class=""><a class="page" href="#">8</a></li>
  <li>
    <a href="#" id="next">
      <svg width="7" height="11" viewBox="0 0 7 11" fill="none" xmlns="http://www.w3.org/2000/svg">
        <path fill-rule="evenodd" clip-rule="evenodd" d="M6.1748 5.75421L1.1748 0.754211L-0.000195489 1.92921L3.81647 5.75421L-0.000195398 9.57921L1.1748 10.7542L6.1748 5.75421Z" fill="#212934"/>
      </svg>
    </a>
  </li>
</ul>
</div>

css html jquery
2 Answers

To enable/disable the #prev and #next links based on the current page you can perform a check in the showPage function which adds a class to them that sets pointer-events: none.

Also note the use of slice() instead of an explicit loop to hide/show the .content elements relevant to the current page.

Update:

On clicking of next & previous button how shall I show the respective page

To achieve this, change your logic so that the function which sets the page also updates the UI - ie. displays the .content for the current page, sets the active page button state and the disabled state of prev/next.

From there the only thing you need to record is the current page number, so that you can increment/decrement it when prev/next are clicked, which I've done using a data() attribute on a container to the .content elements. You can then pass that to the function which sets the active page.

Try this:

jQuery($ => {  
  let $pageContainer = $('.page-container');
  let $content = $pageContainer.children('.content');
  let $pageLinks = $('#pagin li a.page');
  let $prev = $('#prev');
  let $next = $('#next');
  
  let pageSize = 2;
  let pageCount = Math.ceil($('.content').length / 2);
  let currentPage = $pageContainer.data('page') || 1;

  let setActivePage = page => {
    let start = pageSize * (page - 1);
    let end = pageSize * page;
    $content.hide().slice(start, end).show();

    $prev.toggleClass('disabled', page <= 1);
    $next.toggleClass('disabled', page >= pageCount);    
    $pageLinks.removeClass("current").eq(page - 1).addClass('current');    
    $pageContainer.data('page', page);
  }

  setActivePage(currentPage);

  $pageLinks.on('click', e => setActivePage($(e.target).closest('li').index()));
  $prev.on('click', e => setActivePage($pageContainer.data('page') - 1));
  $next.on('click', e => setActivePage($pageContainer.data('page') + 1));
});
.content {
  margin: 1px;
  width: 100px;
  height: 100px;
  border: 1px solid black;
  float: left;
  background-color: gray;
}

#pagin {
  clear: both;
  padding: 0;
  width: 400px;
  margin: 0 auto;
}

#pagin li {
  float: left;
  margin-right: 10px;
}

#pagin li a {
  display: block;
  color: #717171;
  font: bold 11px;
  text-shadow: 0px 1px white;
  padding: 5px 8px;
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  border-radius: 3px;
  -webkit-box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, 0.35);
  -moz-box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, 0.35);
  box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, 0.35);
  background: #f9f9f9;
  background: -webkit-linear-gradient(top, #f9f9f9 0%, #e8e8e8 100%);
  background: -moz-linear-gradient(top, #f9f9f9 0%, #e8e8e8 100%);
  background: -o-linear-gradient(top, #f9f9f9 0%, #e8e8e8 100%);
  background: -ms-linear-gradient(top, #f9f9f9 0%, #e8e8e8 100%);
  background: linear-gradient(top, #f9f9f9 0%, #e8e8e8 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f9f9f9', endColorstr='#e8e8e8', GradientType=0);
}

#pagin li a.current {
  color: white;
  text-shadow: 0px 1px #3f789f;
  -webkit-box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.8);
  -moz-box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.8);
  box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.8);
  background: #7cb9e5;
  background: -webkit-linear-gradient(top, #7cb9e5 0%, #57a1d8 100%);
  background: -moz-linear-gradient(top, #7cb9e5 0%, #57a1d8 100%);
  background: -o-linear-gradient(top, #7cb9e5 0%, #57a1d8 100%);
  background: -ms-linear-gradient(top, #7cb9e5 0%, #57a1d8 100%);
  background: linear-gradient(top, #7cb9e5 0%, #57a1d8 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#7cb9e5', endColorstr='#57a1d8', GradientType=0);
}

#pagin li a.disabled {
  pointer-events: none;
  opacity: 0.4;
}

#pagin li a:hover {
  -webkit-box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, 0.55);
  -moz-box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, 0.55);
  box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, 0.55);
  background: #fff;
  background: -webkit-linear-gradient(top, #fff 0%, #e8e8e8 100%);
  background: -moz-linear-gradient(top, #fff 0%, #e8e8e8 100%);
  background: -o-linear-gradient(top, #fff 0%, #e8e8e8 100%);
  background: -ms-linear-gradient(top, #fff 0%, #e8e8e8 100%);
  background: linear-gradient(top, #fff 0%, #e8e8e8 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fff', endColorstr='#e8e8e8', GradientType=0);
}

#pagin li a:active,
#pagin li a.current:active {
  -webkit-box-shadow: inset 0px 1px 3px 0px rgba(0, 0, 0, 0.5), 0px 1px 1px 0px rgba(255, 255, 255, 1) !important;
  -moz-box-shadow: inset 0px 1px 3px 0px rgba(0, 0, 0, 0.5), 0px 1px 1px 0px rgba(255, 255, 255, 1) !important;
  box-shadow: inset 0px 1px 3px 0px rgba(0, 0, 0, 0.5), 0px 1px 1px 0px rgba(255, 255, 255, 1) !important;
}

#pagin li a.current:hover {
  -webkit-box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.9);
  -moz-box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.9);
  box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.9);
  background: #99cefc;
  background: -webkit-linear-gradient(top, #99cefc 0%, #57a1d8 100%);
  background: -moz-linear-gradient(top, #99cefc 0%, #57a1d8 100%);
  background: -o-linear-gradient(top, #99cefc 0%, #57a1d8 100%);
  background: -ms-linear-gradient(top, #99cefc 0%, #57a1d8 100%);
  background: linear-gradient(top, #99cefc 0%, #57a1d8 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#99cefc', endColorstr='#57a1d8', GradientType=0);
}

li {
  list-style-type: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="page-container">
  <div class="content">1 I have some content</div>
  <div class="content">2 I have some content</div>
  <div class="content">3 I have some content</div>
  <div class="content">4 I have some content</div>
  <div class="content">5 I have some content</div>
  <div class="content">6 I have some content</div>
  <div class="content">7 I have some content</div>
  <div class="content">8 I have some content</div>
  <div class="content">9 I have some content</div>
  <div class="content">10 I have some content</div>
  <div class="content">11 I have some content</div>
  <div class="content">12 I have some content</div>
  <div class="content">13 I have some content</div>
  <div class="content">14 I have some content</div>
  <div class="content">15 I have some content</div>
  <div class="content">16 I have some content</div>
</div>

<ul id="pagin">
  <li>
    <a href="#" id="prev">
      <svg width="8" height="12" viewBox="0 0 8 12" fill="none" xmlns="http://www.w3.org/2000/svg">
        <path fill-rule="evenodd" clip-rule="evenodd" d="M7.15493e-08 6L6 12L7.41 10.59L2.83 6L7.41 1.41L6 7.15493e-08L7.15493e-08 6Z" fill="#212934"/>
      </svg>
    </a>
  </li>
  <li><a class="page current" href="#">1</a></li>
  <li><a class="page" href="#">2</a></li>
  <li><a class="page" href="#">3</a></li>
  <li><a class="page" href="#">4</a></li>
  <li><a class="page" href="#">5</a></li>
  <li><a class="page" href="#">6</a></li>
  <li><a class="page" href="#">7</a></li>
  <li><a class="page" href="#">8</a></li>
  <li>
    <a href="#" id="next">
      <svg width="7" height="11" viewBox="0 0 7 11" fill="none" xmlns="http://www.w3.org/2000/svg">
        <path fill-rule="evenodd" clip-rule="evenodd" d="M6.1748 5.75421L1.1748 0.754211L-0.000195489 1.92921L3.81647 5.75421L-0.000195398 9.57921L1.1748 10.7542L6.1748 5.75421Z" fill="#212934"/>
      </svg>
    </a>
  </li>
</ul>

user_5194130

On click of next and previous button. it doesn't give the text value rather it has icon in its anchor tag. Thus it highlights the button and showPage(parseInt($(this).text())) function doesn't work

Here are the changes required based on your code

$(document).ready(function() {
  pageSize = 2;

  showPage = function(page) {
    $(".content").hide();
    $(".content").each(function(n) {
      if (n >= pageSize * (page - 1) && n < pageSize * page)
        $(this).show();
    });
  }

  showPage(1);

  $("#pagin li a").click(function() {
    let selectedPage = $("#pagin li a.current").parent().index();
    $("#pagin li a").removeClass("disable");
    $("#pagin li a").removeClass("current");

    if($(this).parent().is('#next')) {    
     showPage(selectedPage + 1)
     $("#pagin li").eq(selectedPage + 1).children('a').addClass("current");
    } else if($(this).parent().is('#prev')) {
      showPage(selectedPage - 1)
      $("#pagin li").eq(selectedPage -1).children('a').addClass("current");
    } else {
      $(this).addClass("current")
      showPage(parseInt($(this).text()))
    }
   if($("#pagin li a.current").parent().index() == 1) {
    $('#prev a').addClass('disable');
   }
   if($("#pagin li a.current").parent().index() == 8) { 
    $('#next a').addClass('disable');
   }
  });

});
.content {
  margin: 1px;
  width: 100px;
  height: 100px;
  border: 1px solid black;
  float: left;
  background-color: gray;
}

#pagin {
  clear: both;
  padding: 0;
  width: 400px;
  margin: 0 auto;
}

#pagin li {
  float: left;
  margin-right: 10px;
}

#pagin li a {
  display: block;
  color: #717171;
  font: bold 11px;
  text-shadow: 0px 1px white;
  padding: 5px 8px;
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  border-radius: 3px;
  -webkit-box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, 0.35);
  -moz-box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, 0.35);
  box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, 0.35);
  background: #f9f9f9;
  background: -webkit-linear-gradient(top, #f9f9f9 0%, #e8e8e8 100%);
  background: -moz-linear-gradient(top, #f9f9f9 0%, #e8e8e8 100%);
  background: -o-linear-gradient(top, #f9f9f9 0%, #e8e8e8 100%);
  background: -ms-linear-gradient(top, #f9f9f9 0%, #e8e8e8 100%);
  background: linear-gradient(top, #f9f9f9 0%, #e8e8e8 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f9f9f9', endColorstr='#e8e8e8', GradientType=0);
}

#pagin li a.current {
  color: white;
  text-shadow: 0px 1px #3f789f;
  -webkit-box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.8);
  -moz-box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.8);
  box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.8);
  background: #7cb9e5;
  background: -webkit-linear-gradient(top, #7cb9e5 0%, #57a1d8 100%);
  background: -moz-linear-gradient(top, #7cb9e5 0%, #57a1d8 100%);
  background: -o-linear-gradient(top, #7cb9e5 0%, #57a1d8 100%);
  background: -ms-linear-gradient(top, #7cb9e5 0%, #57a1d8 100%);
  background: linear-gradient(top, #7cb9e5 0%, #57a1d8 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#7cb9e5', endColorstr='#57a1d8', GradientType=0);
}

#pagin li a:hover {
  -webkit-box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, 0.55);
  -moz-box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, 0.55);
  box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, 0.55);
  background: #fff;
  background: -webkit-linear-gradient(top, #fff 0%, #e8e8e8 100%);
  background: -moz-linear-gradient(top, #fff 0%, #e8e8e8 100%);
  background: -o-linear-gradient(top, #fff 0%, #e8e8e8 100%);
  background: -ms-linear-gradient(top, #fff 0%, #e8e8e8 100%);
  background: linear-gradient(top, #fff 0%, #e8e8e8 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fff', endColorstr='#e8e8e8', GradientType=0);
}

#pagin li a:active,
#pagin li a.current:active {
  -webkit-box-shadow: inset 0px 1px 3px 0px rgba(0, 0, 0, 0.5), 0px 1px 1px 0px rgba(255, 255, 255, 1) !important;
  -moz-box-shadow: inset 0px 1px 3px 0px rgba(0, 0, 0, 0.5), 0px 1px 1px 0px rgba(255, 255, 255, 1) !important;
  box-shadow: inset 0px 1px 3px 0px rgba(0, 0, 0, 0.5), 0px 1px 1px 0px rgba(255, 255, 255, 1) !important;
}

#pagin li a.current:hover {
  -webkit-box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.9);
  -moz-box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.9);
  box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.9);
  background: #99cefc;
  background: -webkit-linear-gradient(top, #99cefc 0%, #57a1d8 100%);
  background: -moz-linear-gradient(top, #99cefc 0%, #57a1d8 100%);
  background: -o-linear-gradient(top, #99cefc 0%, #57a1d8 100%);
  background: -ms-linear-gradient(top, #99cefc 0%, #57a1d8 100%);
  background: linear-gradient(top, #99cefc 0%, #57a1d8 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#99cefc', endColorstr='#57a1d8', GradientType=0);
}

li {
  list-style-type: none;
}
.disable {
  pointer-events: none;
  cursor: not-allowed;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="content">1 I have some content</div>
<div class="content">2 I have some content</div>
<div class="content">3 I have some content</div>
<div class="content">4 I have some content</div>
<div class="content">5 I have some content</div>
<div class="content">6 I have some content</div>
<div class="content">7 I have some content</div>
<div class="content">8 I have some content</div>
<div class="content">9 I have some content</div>
<div class="content">10 I have some content</div>
<div class="content">11 I have some content</div>
<div class="content">12 I have some content</div>
<div class="content">13 I have some content</div>
<div class="content">14 I have some content</div>
<div class="content">15 I have some content</div>
<div class="content">16 I have some content</div>

<ul id="pagin">
  <li id="prev"><a class="disable" href="#"><svg width="8" height="12" viewBox="0 0 8 12" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M7.15493e-08 6L6 12L7.41 10.59L2.83 6L7.41 1.41L6 7.15493e-08L7.15493e-08 6Z" fill="#212934"/>
</svg></a></li>
  <li><a class="current" href="#">1</a></li>
  <li><a href="#">2</a></li>
  <li><a href="#">3</a></li>
  <li><a href="#">4</a></li>
  <li><a href="#">5</a></li>
  <li><a href="#">6</a></li>
  <li><a href="#">7</a></li>
  <li><a href="#">8</a></li>
  <li id="next"><a class="" href="#"><svg width="7" height="11" viewBox="0 0 7 11" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M6.1748 5.75421L1.1748 0.754211L-0.000195489 1.92921L3.81647 5.75421L-0.000195398 9.57921L1.1748 10.7542L6.1748 5.75421Z" fill="#212934"/>
</svg>

</a></li>
</ul>

user_191372830
Related