https://moshbox.jp/be/wp-content/themes/simplicity/js/slidetab.js

1$(document).ready(function(){
2
3    /******************************************
4    事前準備
5    *******************************************/
6
7    //タブボタンの数を取得
8    var tabQuantity = $('.tab__button').length;
9
10    //タブの長さとボディの長さの差分を取得
11    //var tabExtraDistance = $('.tab').width() - $('.tabContainer').width();
12    var tabExtraDistance = '408' - $('.tabContainer').width();
13
14    /******************************************
15    スライダー発動
16    *******************************************/
17
18    var slider = $('.tabContents').bxSlider({
19        touchEnabled: false,
20        pager:false,
21        controls:false,
22        onSlideBefore: function($slideElement, oldIndex, newIndex){
23            //スライドする時に関数を呼び出す。newIndexはスライダーの現在地。
24            slideChange(newIndex);
25        }
26    });
27
28
29    /******************************************
30    スライドする時に発動する関数。タブの表示調整を行う。
31    *******************************************/
32
33    function slideChange(newIndex) {
34
35        //クラスを調整
36        $('.tab__button').removeClass('active');
37        $('.tab > div:nth-child(' + ( newIndex + 1 ) + ')').addClass('active');
38        var colors =  ['#ea6000', '#55b6df', '#87c040', '#f6ac19', '#a59aca'];
39        $('.tab__button').css('background-color','#ffffff');
40        $('.tab__button.active').css('background-color',colors[newIndex]);
41
42        //スクロールするべき距離を取得。タブ全体の長さ / ( タブの個数 - 1 ) * スライドの現在値
43        var scrollDestination = ( tabExtraDistance / (tabQuantity - 1) ) * ( newIndex );
44
45        //スクロール位置を調整(そのタブまでスクロール)
46        $('.tabContainer').animate({ scrollLeft: scrollDestination }, 'slow');
47
48    }
49
50    /******************************************
51    タブボタンクリックで発動する関数
52    *******************************************/
53
54    $('.tab__button').on('click',function(e){
55
56        //何番目の要素かを取ってスライドを移動する
57        var nth = $('.tab__button').index(this);
58        slider.goToSlide(nth);
59
60        //クリックイベントを無効化
61        e.preventDefault();
62
63    })
64
65});