如何创建显示隐藏按钮和所有按钮名称的幻灯片？

Question

如何创建显示隐藏按钮的幻灯片？有一个按钮列表，其中一些按钮是隐藏的。

您需要在纯JS上创建一个没有任何效果的简单幻灯片/开关，当您单击“下一个”按钮切换到下一个按钮时，如果隐藏，则在切换到下一个按钮时显示该隐藏按钮下一个隐藏按钮，前一个应该消失，而当前应该出现。切换到主div时，无论是否隐藏，都应记录当前按钮的名称。

切换到隐藏按钮时，主按钮必须保持其状态。

var slides = document.querySelectorAll('#slides .slide');
    var currentSlide = 0;

    function nextSlide() {
      goToSlide(currentSlide + 1);
    }

    function previousSlide() {
      goToSlide(currentSlide - 1);
    }

    function goToSlide(n) {
      slides[currentSlide].className = 'slide';
      currentSlide = (n + slides.length) % slides.length;
      // console.log(currentSlide);
      var l = slides[currentSlide].className = 'btn';
      // console.log(l);
    }

    next.onclick = function () {
      nextSlide();
    };
    previous.onclick = function () {
      previousSlide();
    };

.hidden { display: none; } 
    .visible { display: block; }

<!-- List with buttons -->
     <ul>
        <li class="slide visible"><button class="btn" name="Visible One"/>Button Visible One</li> 
        <li class="slide visible"><button class="btn" name="Visible Two"/>Button Visible Two</li> 
        <li class="slide hidden"><button class="btn" name="Hidden One"/>Button Hidden One</li> 
        <li class="slide hidden"><button class="btn" name="Hidden Two"/>Button Hidden Two</li>
    </ul> 
    
    <div class="result"><p>Здесь должен быть name кнопки</p></div>
    
    <!-- Movement buttons -->
    <button id="previous">Previos</button>  
    <button id="next">Next</button>