Bu Menüyü Kayan Menü Nasıl Yapabiliriz ?

Merhaba arkadaşalr aşağıdaki vereceğim kodu mause ile itince ilerleyen ve dokunmatik cihazlarda parmak ile itekleyince ileri geri giden menü haline nasıl çevirebilirim yardımcı olurmusunuz ?

<button class="category-btn-1">Button</button>
<button class="category-btn-1">Button</button>
<button class="category-btn-1">Button</button>
<button class="category-btn-1">Button</button>
<button class="category-btn-1">Button</button>
<button class="category-btn-1">Button</button>
<button class="category-btn-1">Button</button>
<button class="category-btn-1">Button</button>
<button class="category-btn-1">Button</button>
<button class="category-btn-1">Button</button>
<button class="category-btn-1">Button</button>
<button class="category-btn-1">Button</button>
<button class="category-btn-1">Button</button>
<button class="category-btn-1">Button</button>
<button class="category-btn-1">Button</button>
<style>
.category-btn-1 {
    width: 70px;
    height: 70px;
    border: none;
    color: white;
    background-color: #4CAF50;
    cursor: pointer;
    border: 2px solid #4CAF50;
    -moz-border-radius: 50%;
    -webkit-border-radius: 50%;
    border-radius: 50%;
}
 
.category-btn-1:hover {
    color: #4CAF50;
    background-color: #fff;
    border: 2px solid #4CAF50;
}


</style>

<button class="category-btn-1" id="menu-btn">Button</button>

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function() {
  $("#menu-btn").on("click swipe", function() {
    
  });
});
</script>

@furkanozcan; üstadım olmadı malesef mobilden bakıyorum kutucuklar alt alta geliyor ileri geri yitilmiyor.

<button class="category-btn-1">Button</button>
<button class="category-btn-1">Button</button>
<button class="category-btn-1">Button</button>
<button class="category-btn-1">Button</button>
<button class="category-btn-1">Button</button>
<button class="category-btn-1">Button</button>
<button class="category-btn-1">Button</button>
<button class="category-btn-1">Button</button>
<button class="category-btn-1">Button</button>
<button class="category-btn-1">Button</button>
<button class="category-btn-1">Button</button>
<button class="category-btn-1">Button</button>
<button class="category-btn-1">Button</button>
<button class="category-btn-1">Button</button>
<button class="category-btn-1">Button</button>
<style>
.category-btn-1 {
    width: 70px;
    height: 70px;
    border: none;
    color: white;
    background-color: #4CAF50;
    cursor: pointer;
    border: 2px solid #4CAF50;
    -moz-border-radius: 50%;
    -webkit-border-radius: 50%;
    border-radius: 50%;
    display: inline-block;
}
  
.category-btn-1:hover {
    color: #4CAF50;
    background-color: #fff;
    border: 2px solid #4CAF50;
}
 
</style>

<script>
const buttons = document.querySelectorAll('.category-btn-1');

let currentIndex = 0;

buttons.forEach(button => {
    button.addEventListener('click', () => {
        buttons.forEach(button => {
            button.style.display = 'none';
        });
        buttons[currentIndex].style.display = 'inline-block';
        currentIndex = (currentIndex + 1) % buttons.length;
    });
});
</script>

@FurkanOzsan; Malesef yine olmadı