带有箭头导航的水平滑块导航

Question

我正在尝试在固定的标题中创建水平导航滑块。我对如何使用滑块箭头创建固定标题有些迷惑。下面的代码显示带有按钮的左右箭头代码。有一个标题部分和一个用于实际导航的部分，带有左右箭头。但是写javascript / jquery让我有些迷茫。

<style>
@font-face {
 font-family:"Poppins";
 src: url("../Font/Poppins/Poppins-Regular.woff") format('woff');
 font-weight: 600;
}

html {
 width: 100%;
 height: 100%;
 font-family: 'Poppins', sans-serif; 
 overflow: hidden;
}

.test_main {
    width: 100%;
    height: 100%;
    overflow: hidden;
}

.test_header {
    width: 100%;
    height: 3%;
    background: radial-gradient(circle at 0% 0%, #373b52, #252736 51%, #1d1e26);
}

.test_logo {
    width: 10%;
    height: 100%;
    background: inherit;
    float: left;
    display: inline;
}

.test_logo span {
    font-weight: 900;
    letter-spacing: 1px;
    color: #fff;
    padding-left: 1%;
    padding-top: 1.75%;
    float: left;
    display: inline;
}

.test_logo img {
    width: 1vw;
    height: auto;
    padding-left: 5%;
    padding-top: 1.75%;
    float: left;
    display: inline;
}

.test_tabs {
    width: 90%;
    height: 100%;
    background: inherit;
    float: left;
    display: inline;
}

.arrow_left, .arrow_right {
    font-size: 2vh;
    color: #ef0003;

}

.arrow_left:hover, .arrow_right:hover {
    color: #fff;

}

.arrow_cont_left {
    width: 1.5%;
    height: 100%;
    float: left;
    display: inline;
    background: inherit;
    vertical-align: middle;
    text-align: center; 
}

.arrow_button {
    cursor: pointer;
}



.arrow_cont_right {
    width: 1.5%;
    height: 100%;
    float: left;
    display: inline;
    background: inherit;
    vertical-align: middle;
    text-align: center; 
}


.tabbed {
    width: 97%;
    height: 100%;
    background: inherit;
    float: left;
    position: relative;
    display: inline;
    overflow-y: hidden;
    overflow-x: auto;
}

.tabbed_content {
    width: 5vw;
    height: 100%;
    background: inherit;
    color: #fff;
    vertical-align: middle;
    text-align: center; 
    float: left;
    display: inline;
    overflow-y; hidden;
    font-size: 1vw;
    border: none;
    outline: none;
    margin: 0;
}

.tabbed_content:hover {
    background: #00afef;
    border-bottom: 1px solid #9712ee;
    color: #fff;
    overflow-y; hidden;
}

.tabbed_content span {
    vertical-align: middle;
    text-align: center;
    width: 75%;
    height: 100%;
    font-size: 1vh;
    background: inherit;
}

.tabbed_button {
    cursor: pointer;
    width: 100%;
    height: 100%;
    display: inline-block;
    float: left;
}

.test_content {
    width: 100%;
    height: 97%;
    background: inherit;
}

.test_tabbed_content {
    display: none;
    width: 100%;
    height: 100%;
}

.external_object {
    width: 100%;
    height: 100%;
}

@media only screen and (max-width:480px) {
    .test_header {height: 3%;}
    .test_logo {width: 26%;}
    .test_logo span {font-size: 1vh; padding-top: 5%;}
    .test_logo img {width: 2.5vw; padding-top: 5%;}
    .test_tabs {width: 74%;}
    .arrow_cont_right, .arrow_cont_left {width: 10%; margin-top: -.25%;}
    .tabbed {width: 80%;}
    .tabbed_content {width: 15vw; font-size: 1vw;}
    .tabbed_button span {font-size: 1.5vw;}
}

@media screen and (min-width: 769px) and (max-width: 1400px) {
    .test_logo span {font-size: 1.25vh;}
    .arrow_cont_right, .arrow_cont_left {margin-top: -.3%;}
}

@media screen and (min-width: 1401px) and (max-width: 1920px) {
    .test_header {height: 5%;}
    .test_content {height: 93%;}
    .tabbed_content span {width: 100%; font-size: 2vh; margin: 0 auto;}
    .tabbed_content {width: 10vw; padding-top: 0.5%;}
    .tabbed_button {font-size: 1.25vw;}
    .tabbed {width: 96%;}
    .arrow_cont_right, .arrow_cont_left {width: 2%; margin-top: -.25%;}
    .arrow_left, .arrow_right {font-size: 3.5vh;}
    .test_logo span {padding-left: 2.5%; padding-top: 5%;}
    .test_logo img {padding-left: 5%; padding-top: 6.25%;}
}

</style>




<div class="test_main">
    <div class="tests_header">
        <div class="test_logo">
            <span> Test</span><img src="../Media/test.png"/>
        </div>
        <div class="windows_tabs">
            <a class="arrow_button"><div class="arrow_cont_left"><span class="arrow_left">&lt;</span></div></a>
            <div class="tabbed">
                <button class="tabbed_content"><a class="tabbed_button" name="Test1"><span>Test1</span></a></button>
                <button class="tabbed_content"><a class="tabbed_button" name="Test2"><span>Test2</span></a></button>
                <button class="tabbed_content"><a class="tabbed_button" name="Test3"><span>Test3</span></a></button>
                <button class="tabbed_content"><a class="tabbed_button" name="Test4"><span>Test4</span></a></button>
                <button class="tabbed_content"><a class="tabbed_button" name="Test5"><span>Test5</span></a></button>
            </div>
            <a class="arrow_button"><div class="arrow_cont_right"><span class="arrow_right">&gt;</span></div></a>
        </div>
    </div>