Слайдер пунктов списка на чистом JS

var warrd = document.body.querySelector(".mini-arrow-down-btn"); //стрелка вниз 
var warru = document.body.querySelector(".mini-arrow-up-btn"); //стрелка вверх 
window.onload = function() { //добавляю классы 
  var wbody = document.body.querySelector(".visas-module-menu-body").lastChild; 
  wbody.classList.add("w-viewport"); 
  var wlist = document.body.querySelector(".w-viewport > ul"); 
  wlist.classList.add("w-list"); 
}; 
warru.onclick = function() { 
  wlist.scrollTop += 100; 
} 
warrd.onclick = function() { 
  wlist.scrollTop -= 100; 
}

.w-viewport { 
  width: 180px; 
  height: 317px; 
  overflow: hidden; 
  position: relative; 
} 
 
.w-list { 
  position: absolute; 
  width: 180px; 
  left: 0; 
  top: 0; 
  height: 600px; 
  margin: 0; 
  padding: 0; 
}

<?php foreach ($list as $group_name => $group) : ?> 
<div class="visas-module-menu-items"> 
  <ul> 
    <?php $gn=Визы; if (!($group_name == $gn)) { ?> 
    <div class="visas-module-items-category text-center"> 
      <?php echo JText::_($group_name); ?> 
    </div> 
    <?php } ?> 
    <?php foreach ($group as $item) : ?> 
    <li class="visa-module-btn"> 
      <span class="visa-module-btn-bg"></span> 
      <div> 
        <div class="country-flag-mini" style="background-image: url('/images/country_flags/<?php echo $item->alias; ?>.png');"></div> 
        <span class="visa-module-btn-title"><?php echo $item->title; ?></span> 
      </div> 
      <input value="<?php echo $item->alias; ?>" style="display: none;"> 
    </li> 
    <?php endforeach; ?> 
  </ul> 
</div> 
<?php foreach ($group as $item) : ?> 
<div class="visas-module-item visas-module-item-<?php echo $item->alias; ?>"> 
  <div class="col-lg-8 col-lg-offset-2 col-md-8 col-md-offset-2 col-sm-12 col-xs-12 block-anim"> 
    <h2 class="visas-module-item-title"> 
      <?php echo $item->title; ?> 
    </h2> 
    <p class="visas-module-item-introtext"> 
      <?php echo $item->displayIntrotext; ?> 
    </p> 
    <div class="visas-module-item-readmore"> 
      <a class="visas-link" href="<?php echo $item->link; ?>">читать далее</a> 
      <button class="red-btn" type="button" data-toggle="modal" data-target="#popup-SYA"><span><span>оформить визу</span><span>оформить визу</span></span></button> 
    </div> 
  </div> 
  <?php $image = json_decode($item->images, true); if($image) : ?> 
  <div class="col-lg-2 col-md-2 hidden-sm hidden-xs block-anim"> 
    <div class="visas-module-item-img" style="background-image: url('/<?php echo $image['image_intro'] ?>');"> 
      <span class="white-bg"></span> 
      <div class="icon big-eye-btn"></div> 
      <div class="openimg-btn"></div> 
    </div> 
  </div> 
  <?php endif; ?> 
</div> 
<?php endforeach; ?>