Slideshow is removing partial text from website

Question

So, after Mohamed-Yousef and Rachel's help, I managed to edit my script in a good way. Now everything works fine. Thank you for both of you. My question was how to make a slideshow navbar. So, the code above is a code for slideshow navbar

SCRIPT

$(document).ready(function() {
  var pages = $('#container li'),
    current = 0;
  var currentPage, nextPage;

  $('#container .button').click(function() {
    currentPage = pages.eq(current);
    if ($(this).hasClass('prevButton')) {

      if (current <= 0)
        current = pages.length - 5;
      else
        current = current - 1;
    } else {
      if (current >= pages.length - 1)
        current = 0;
      else
        current = current + 5;
    }
    nextPage = pages.eq(current);
    pages.hide();
    nextPage.show();
  }).filter('.nextButton').click();
});

<script src="https://code.jquery.com/jquery-3.1.0.js"></script>
<div class="header" id="home">

  <div class="header-top">
    <div class="container">
      <div class="logo">
        <a href="index.html"><img src="images/logo.png"></a>
      </div>
      <div class="top-menu">
        <span class="menu"> </span>
        <div id="container">
          <ul>
            <li><a href="#about" class="scroll">Proiecte</a>
            <li> <a href="#trainers" class="scroll">Eustiu</a>
            <li> <a href="#testimonial" class="scroll">Altceva</a>
            <li> <a href="/login">Haisavedem</a>
            <li> <a href="#" class="dropbtn">Cecacat</a> </li>
            <li><a href="#about " class="scroll ">Prezentare</a>
              <a href="#trainers " class="scroll ">Resurse Umane</a>
              <a href="#testimonial " class="scroll ">Bacalaureat</a>
              <a href="/login ">Contacteaza-ne</a>
              <a href="# " class="dropbtn">Altele</a></li>
            <li><a href="#about" class="scroll">11</a>
              <a href="#trainers" class="scroll">12</a>
              <a href="#testimonial" class="scroll">13</a>
              <a href="/login">14</a>
              <a href="#" class="dropbtn">15</a></li>

            <button class="button prevButton ">⟵</button>
            <button class="button nextButton ">⟶</button>

Answer 1

I got a working demo; it's a work-in-progress (cos i haven't quite figured how to set default list yet?) but i thought I'd post it anyway. The key is really to use the jquery .slice method to cut your list up into chunks of 5.

See snippet or fiddle

$('#less').on('click', function() {
  prevpage = $('li:visible:first').index() - 5;
  if (prevpage >= $('li').length) {
    prevpage = 0;
  }
  $('li').hide();
  $toShow = $('li:hidden').slice(prevpage, prevpage + 5);
  $toShow.show();
});
$('#next').on('click', function() {
  thispage = $('li:visible:last').index() + 1;
  if (thispage >= $('li').length) {
    thispage = 0;
  }
  $('li').hide();
  $toShow = $('li:hidden').slice(thispage, thispage + 5);
  $toShow.show();
});

ul {
  list-style-type: none;
}

li {
  display: none;
}

<script src="https://code.jquery.com/jquery-3.1.0.js"></script>
<button id="next">Next 5</button>
<ul>
  <li>1</li>
  <li>2</li>
  <li>3</li>
  <li>4</li>
  <li>5</li>
  <li>6</li>
  <li>7</li>
  <li>8</li>
  <li>9</li>
  <li>10</li>
  <li>11</li>
  <li>12</li>
  <li>13</li>
  <li>14</li>
  <li>15</li>
</ul>
<button id="less">Prev 5</button>