（swiperでメニューボタンを押した時に、センター表示にしたい。）前回の質問が解決していませんでした。

Question

|1 | 2 | 3 | 4 | 5 |6　7　8
画面内に1～5のタブがあり、スライドするので6、7は外面の外で見えない状態

　　　　　　　　　　
最初に「1」にスライドがあり2、3、4、5番と順番に押すとうまくスライドするのですが、
1番から5番を押すとスライドせず、5番から4番を押すとスライドするなど
ちぐはぐな動きになってしまいます。

どなたか、教えてもらえないでしょうか？

$(document).ready(function(){

$(function(){
    $(window).on('load scroll resize', function(){
        if( $(this).scrollTop() > $('#nav').offset().top ) {
            $('nav').addClass('fix');
        }
        else {
            $('nav').removeClass('fix');
        }
    });


window.addEventListener('DOMContentLoaded', function() {


//グローバルメニュー
  var galleryThumbs = new Swiper('.tab-menu', {
    spaceBetween: 1,
    slidesPerView: 5,
    watchSlidesVisibility: true,
    watchSlidesProgress: true,
    slideActiveClass: 'swiper-slide-active'
  });

galleryThumbs.on('touchEnd', function () { //サムネイルがタップされたら、
 var current = galleryTop.activeIndex; //選ばれたコンテンツの番号をとってきて、
 galleryThumbs.slideTo(current - 2, 500, true); //その番号の二つ前のタブまで500ミリ秒かけてスライドする
});
//コンテンツ
  var galleryTop = new Swiper('.tab-contents', {
    spaceBetween: 2,
    autoHeight: true,
    thumbs: {
      swiper: galleryThumbs
    }
});
//投稿
var mySwiper1 = new Swiper('.swiper1', {
        initialSlide: 1,
        hashNavigation: true,
	navigation: {
		nextEl: '.next1',
		prevEl: '.prev1'
	},
	pagination: {
		el: '.page1',
		type: 'bullets',
		clickable: true
        }
});


});
});
});
    });


コード

<?php $options = get_desing_plus_option(); if (!is_paged()): get_header(); ?>

<?php if(wp_is_mobile()): ?>



<div class="container">
 
        <!-- Swiper -->
<div id="nav">
<nav>
        <div class="swiper-container tab-menu">
            <div class="swiper-wrapper">
                <div class="swiper-slide">トップ</div>
                <div class="swiper-slide">スポット</div>
                <div class="swiper-slide">遊び</div>
                <div class="swiper-slide">グルメ</div>
                <div class="swiper-slide">ペット</div>
                <div class="swiper-slide">お店</div>
                <div class="swiper-slide">特集</div>
                <div class="swiper-slide">雑貨</div>
            </div>
        </div>
</nav>
</div>
    
        <div class="swiper-container tab-contents">
            <div class="swiper-wrapper">
                <div class="swiper-slide">ボックス1</div>
                <div class="swiper-slide">ボックス2</div>
                <div class="swiper-slide">ボックス3</div>
                <div class="swiper-slide">ボックス4</div>
                <div class="swiper-slide">ボックス5</div>
                <div class="swiper-slide">ボックス6</div>
                <div class="swiper-slide">ボックス7</div>
                <div class="swiper-slide">ボックス8</div>
   </div>
  </div> 


コード

	<div class="swiper-container swiper1">
		<!-- メイン表示部分 -->
		<div class="swiper-wrapper">
			<!-- 各スライド -->

			<div class="swiper-slide">　個別記事</div>
   </div>
  </div> 


コード

}
.container {
width: auto; !important;
  margin-left:0%;


}
.swiper-container {
  margin: 0 auto 30px;

}
.tab-menu{
  content:"";
  margin-left:0%;
 width: auto;
  height: 35px;
  line-height:15px;
  border-bottom: 1px solid #cccc ;


}
.tab-menu .swiper-slide {
   width: auto;
   position:relative;
   padding: 10px 0;
   background-color: #a7f2e4;
   text-align: center;
   font-weight: bold;
   font-size: calc(70% + 0.12vw);
   vertical-align: middle;

}
.tab-contents {
   margin: 0px auto;

}
.swiper-slide-thumb-active {
   background-color: rgb(242, 56, 121) !important;
   border-bottom: 10px solid rgb(242, 56, 121) !important;
   color: rgb(250,250, 250) !important;
   font-weight: bold;
}

#nav {
    position: relative;
    width: 100%;
    height: 35px;
}

nav {
    position: absolute;
    width: 100%;
    height:35px;

}

nav.fix {
    position: fixed;
    top: 0;
    max-width: 100vw;
    z-index:999;
}

.swiper1.swiper-slide {
   width: 100%;
   height: 100%;
}



    .iframeBody{
  margin: 0;
  padding: 0;
  border: 0;
  overflow: hidden;
 }
        iframe{
        border:none;
        width:100%;
        height:100%;

        }
 
コード

現在のJavaScriptです。
前回、回答をいただき、1から順番にタブメニューを押したら、うまくできたと思っていたのですが、1番の次に5番などを押す場合（順番に押さない場合）に、うまくいかなかったので、その後のコードによって、うまくいかなくなったのではないです。
よろしくお願いします。

Comments

[hwatarig]

記載されているコードでは状況が再現できないので、現時点のコードを漏れなく記載ください。
また、前回の質問のurlを参考に貼って、解決した後何があってまたうまくいかなくなったのか記載いただくと良いかもしれません。
前回の質問、これですよね。 https://teratail.com/questions/243212

[hwatarig]

javascriptだけではなく、html、cssも完全な物を記載してください。
たとえばhtmlにはjavascriptで指定している .tab-menu というクラスがありませんし、cssは global-nav という存在しない要素にたいしてスタイルがかけられています。
コードブロックを書く際、「```」の後には必ず改行が必要です。

Answer 1

以下の3行がgallertyThumbsとgalleryTopの定義の間に記載されていますが、galleryTopの定義よりも後ろに移動してください。

galleryThumbs.on("tap", function() {
  //サムネイルがタップされたら、
  var current = galleryTop.activeIndex; //選ばれたコンテンツの番号をとってきて、
  galleryThumbs.slideTo(current - 2, 500, true); //その番号の二つ前のタブまで500ミリ秒かけてスライドする
});

ついでに……いくつか誤りがあるので記載しておきます。

importantの使い方
width: auto; !important;→width: auto!important;

DOMの読み込みを待つ記述
$(document).ready(function(){
window.addEventListener('DOMContentLoaded', function() {
この二つはほぼ同じ意味のはずです。どちらかだけ使えばいいと思います。

js
末尾の});が多すぎます。

Comments

[kenshin]

本当にわからないと、時間がめちゃくちゃかかり、本当に助かりました。
僕みたいな素人に色々教えていただき本当に感謝しています。

回答も丁寧ですし、めちゃくちゃ助かりました。
hwatarigさんありがとうございました。