まず､文字にする場合｡
index06.html の後半にある <script> に以下のように追記します｡

<script>
 var glide = $('.slider').glide().data('api_glide');

 $(window).on('keyup', function (key) {
 if (key.keyCode === 13) {
 glide.jump(3, console.log('Wooo!'));
 };
 });

 $('.slider__arrows-item').on('click', function() {
 console.log(glide.current());
 });

 // ★ここから
 var content = ['会社概要', '会社案内', '文字3', '文字4', '文字5', '文字6', '文字7',];
 $(".slider__nav-item").each(function(index) {
 $(this).text(content[index])
 });
 // ★ここまでを追加
</script>

<!-- ★以下のｽﾀｲﾙを追加 -->
<style>
div.slider__nav {
 width: 350px !important;
 margin-left: -175px !important;
}
</style>

.slider__nav の width と margin-left の値は､適当に調整してください｡
width を表示する文字の幅に合わせて､その半分の値を margin-left に設定します｡


ｲﾒｰｼﾞﾌｧｲﾙの場合｡

<script>
 var glide = $('.slider').glide().data('api_glide');

 $(window).on('keyup', function (key) {
 if (key.keyCode === 13) {
 glide.jump(3, console.log('Wooo!'));
 };
 });

 $('.slider__arrows-item').on('click', function() {
 console.log(glide.current());
 });

 // ★ここから
 var image_url = ['/images/1.jpg', '/images/2.jpg', '/images/3.jpg', '/images/4.jpg', '/images/5.jpg', '/images/6.jpg', '/images/7.jpg',];
 $(".slider__nav-item").each(function(index) {
 var img = $("<img />");
 img.attr("src", image_url[index]);
 $(this).append(img);
 });
 // ★ここまでを追加
</script>

<!-- ★以下のｽﾀｲﾙを追加 -->
<style>
div.slider__nav {
 width: 300px !important;
 margin-left: -150px !important;
}
.slider__nav-item img { /* これは無くても良いかも */
 width: 100px;
}
</style>

.slider__nav の width と margin-left の調整の仕方は､文字の場合と同じです｡