var li = document.getElementsByTagName('li');

var limit = 3;

​

// hiding more then [limit] elements

if (li.length > limit) {

  var display = 'true';

  for (var i = 1; i < li.length - 1; i++) {

    li[i].dataset.display = display;

    if (i >= limit) {

      display = 'false';

    }

  }

}

​

// adding event listener

var prev = document.getElementById('prev');

var next = document.getElementById('next');

prev.addEventListener("click", showprev);

next.addEventListener("click", shownext);

​

function showprev() {

  // if the first element is already shown - do nothing

  if (li[1].dataset.display == 'true') {

    return;

  }

  // get all shown

  var displayed = document.querySelectorAll('li[data-display="true"]');

  // hide last shown

  displayed[displayed.length-1].dataset.display = 'false';

  // show prev of first shown

  displayed[0].previousElementSibling.dataset.display = 'true';

}

​

function shownext() {

  // if the last elem already shown - do nothing

  if (li[li.length - 2].dataset.display == 'true') {

    return;

  }

  // get all shown

  var displayed = document.querySelectorAll('li[data-display="true"]');

  // hide first shown

  displayed[0].dataset.display = 'false';

  // show next of last shown

  displayed[displayed.length-1].nextElementSibling.dataset.display = 'true';

}

​

​