Flickityを利用したスワイプタブでタブ切り替え時にタブ位置を移動する方法

概要

スライダープラグイン「Flickity」を使用し、webページでスワイプタブの実装を行なっています。
GunosyのWeb版のタブのように、タブを切り替えた際に選択中のタブ位置を中央に移動(端の場合は端のまま)させる実装に躓いています。

やりたいこと

タブを切り替えた時に、タブを画面の中央に配置する
タブが左端（または右端）の場合は中央ではなく端のままにする

使用中のプラグイン

Flickity

参考

Gunosy

スマホブラウザでのタブの挙動を実現したいです。

現在のソースコード

html
1<html lang="ja">
2
3<head>
4    <link rel="stylesheet" type="text/css" href="base.css">
5    <!-- Flickityの読み込み -->
6    <!-- CSS -->
7    <link rel="stylesheet" href="flickity.css" media="screen">
8    <!-- JavaScript -->
9    <script src="flickity.pkgd.min.js"></script>
10</head>
11
12<body>
13    <nav class="nav nav_home">
14        <div class="nav_buttons">
15            <button class="nav_button nav_button_current">aaa</button>
16            <button class="nav_button">bbb</button>
17            <button class="nav_button">ccc</button>
18            <button class="nav_button">ddd</button>
19            <button class="nav_button">eee</button>
20            <button class="nav_button">aaa</button>
21            <button class="nav_button">bbb</button>
22            <button class="nav_button">ccc</button>
23            <button class="nav_button">ddd</button>
24            <button class="nav_button">eee</button>
25            </button>
26        </div>
27    </nav>
28        <div class="js-gallery">
29            <div class="gallery-cell">aaaaa</div>
30            <div class="gallery-cell">bbbbb</div>
31            <div class="gallery-cell">ccccc</div>
32            <div class="gallery-cell">ddddd</div>
33            <div class="gallery-cell">eeeee</div>
34            <div class="gallery-cell">aaaaa</div>
35            <div class="gallery-cell">bbbbb</div>
36            <div class="gallery-cell">ccccc</div>
37            <div class="gallery-cell">ddddd</div>
38            <div class="gallery-cell">eeeee</div>
39        </div>
40    <script type="text/javascript" src="flickity.pkgd.js"></script>
41</body>
42</html>

javascript
1var flkty = new Flickity('.js-gallery', {
2  pageDots: false,
3  prevNextButtons: false
4});
5
6var buttonGroup = document.querySelector('.nav_buttons');
7var buttons = buttonGroup.querySelectorAll('.nav_button');
8buttons = fizzyUIUtils.makeArray( buttons );
9
10buttonGroup.addEventListener( 'click', function( event ) {
11  // filter for button clicks
12  if ( !matchesSelector( event.target, '.nav_button' ) ) {
13    return;
14  }
15  var index = buttons.indexOf( event.target );
16  flkty.select( index );
17});
18
19
20// ボタンのDOM要素を取得
21var btn = buttonGroup.getElementsByClassName('nav_button');
22
23// ボタンの個数分ループ
24// 変数「i」に現在のループ回数が代入される
25for (var i = btn.length - 1; i >= 0; i--) {
26　　btnAction(btn[i],i);
27}
28
29function btnAction(btnDOM,btnId){
30　　// 各ボタンをイベントリスナーに登録
31　　btnDOM.addEventListener("click", function(){
32　　// activeクラスの追加と削除
33　　// thisは、クリックされたオブジェクト
34    if(this.classList.contains('nav_button_current') == false ){
35      　　　　　　　　　　this.classList.toggle('nav_button_current');
36　　　}
37　　// クリックされていないボタンにactiveがついていたら外す
38　　for (var i = btn.length - 1; i >= 0; i--) {
39　　　　if(btnId !== i){
40　　　　　　if(btn[i].classList.contains('nav_button_current')){
41　　　　　　　　btn[i].classList.remove('nav_button_current');
42　　　　　　}
43　　　　}
44　　}})
45}