swiperでメニューボタンを押した時に、センター表示にしたい。

Question

コード
```メニュータブを8個つくって

スマホ画面内に5個表示していますが

メニュータブを押した時に

4番目から6番目を押した時にセンターに表示したいです。


今現地のものです。

**html**
```<div class="container1">
<nav id="global-nav">
 <div class="swiper-container swiper-navigation">
    <div class="swiper-wrapper">
      <div class="swiper-slide" data-type="article　active" data-tag="ボックス1"></div>
      <div class="swiper-slide" data-type="article" data-tag="ボックス2"></div>
      <div class="swiper-slide" data-type="article" data-tag="ボックス3"></div>
      <div class="swiper-slide" data-type="article" data-tag="ボックス4"></div>
      <div class="swiper-slide" data-type="article" data-tag="ボックス5"></div>
      <div class="swiper-slide" data-type="article" data-tag="ボックス6"></div>
      <div class="swiper-slide" data-type="article" data-tag="ボックス7"></div>
      <div class="swiper-slide" data-type="article" data-tag="ボックス8"></div>
   </div>
    <div class="swiper-pagination"></div>
     </div>
  </div>
  <div class="swiper-container tab-contents">
     <div class="swiper-wrapper">
      <div class="swiper-slide">ボックス9</div>
　　<div class="swiper-slide">ボックス10</div>
      <div class="swiper-slide">ボックス11</div>
      <div class="swiper-slide">ボックス12</div>
      <div class="swiper-slide">ボックス13</div>
　　　<div class="swiper-slide">ボックス14</div>
      <div class="swiper-slide">ボックス15</div>
      <div class="swiper-slide">ボックス16</div>
    </div>
  </div> 


body{

}

.contener1{
width: auto;
margin-left:2%;
}

global-nav {

width: auto;
height: 40px;
margin-left:0%;
background: #fff;
width: 100%;
z-index:999;
}

global-nav.m_fixed {

left: 0;
position: fixed;
top: 0;
}

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

/* 下線*/
.swiper-navigation {
width: auto;
border-bottom:2px solid #e6e6e6;

}
.swiper-slide-thumb-active {
transform:translateX(-50%)
opacity: .7;
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;

}

/* タブ*/
.swiper-navigation .swiper-slide{
/* widthに１００％を4で割る指定*/
content:"";
text-align: center; 
width: auto;

height: 35px;
line-height:40px;
background-color: #a7f2e4;
font-weight: bold;
font-size: calc(70% + 0.12vw)
}

/* タブの色の濃さ　さわらない*/
.tab-menu .swiper-slide {
cursor: pointer;
opacity: .7;
}

.swiper-navigation .swiper-wrapper{

/*    タブからコンテンツの距離   */
height:40px;
}

/*   コンテンツ   */

.tab-contens{
background-color: #dcdcdc; 
text-align: center; 
margin-left:2%;
}

.tab-contens div a{
display: table; 
width: 100%; 
text-decoration: none; 
padding: 10px; !important;
border-bottom:1px solid #000; 
color:#222; !important;
text-align: left; 
line-height: 1.5em; 
font-size: 14px;
}

``jQuery(function($){
$(document).ready(function(){


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


// グローバルメニューの固定

var navPos = jQuery( '#global-nav' ).offset().top; // グローバルメニューの位置
var navHeight = jQuery( '#global-nav' ).outerHeight(); // グローバルメニューの高さ
jQuery( window ).on( 'scroll', function() {
  if ( jQuery( this ).scrollTop() > navPos ) {
    jQuery( 'body' ).css( 'padding-top', navHeight );
    jQuery( '#global-nav' ).addClass( 'm_fixed' );
  } else {
    jQuery( 'body' ).css( 'padding-top', 0 );
    jQuery( '#global-nav' ).removeClass( 'm_fixed' );
  }
});

var galleryThumbs  = new Swiper('.swiper-navigation', {
    spaceBetween: 2,
    slidesPerView: 5,
    watchSlidesVisibility: true,
    watchSlidesProgress: true,
    grabCursor: true,
    slideToClickedSlide: true,
   freeMode: true, 
　
    on: {
      tap: function(event) {
        // 選択されてないタブをタップしたら下のスライダーを動かす
        if (this.clickedIndex !== galleryThumbs.activeIndex &&
            $(this.clickedSlide).data('tag') !== $(galleryThumbs.slides[galleryThumbs.activeIndex]).data('tag')
          ) {
          galleryThumbs.slideTo(this.clickedIndex);
        }
      }
    }
});

var galleryTop = new Swiper('.tab-contents', {
     direction: 'horizontal',
     loop: false,
     slideToClickedSlide: true,
     thumbs: {swiper: galleryThumbs},
});

});
});
});
コード
```

Comments

[hwatarig]

やりたいことは
左から4番目〜6番目のタブを押した時に、押したタブが画面中央にくるようにしたい。
ということでしょうか。

また、参考にしたコードがある場合はそのurlを貼っていただけるとわかりやすいです。
これかなと思うのですが https://mdstage.com/web/javascript/swipe-tab-menu 合ってますか？

[kei344]

質問タグが「Java」になっていますが、「JavaScript」では？

[kenshin]

4番から6番
そのとおりです。
右に押した時は良いのですが、左に押した時にボタンがスライドしない為
ボタンでは、戻れなくなります。

JavaScriptですね。
初心者なもので、すいません。

[kei344]

ここは「質問への追記・修正の依頼」です。質問本文は編集することが可能なので、その依頼をしています。（タグを元に絞り込み表示されているので、修正されたほうが回答者に見つけやすくなりますよ）

Answer 1

選択中のタブを画面中央に持ってくるためにCSSで試行錯誤されていますが、Swiper.jsの.slideTo()を使うことで簡単に実現出来そうです。

こちらを参考にすると、https://mdstage.com/web/javascript/swipe-tab-menu
選択中のタブを動かす動きは以下で定義されています。

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

activeIndexやslideToがどういうものかはSwiper.jsの公式サイトに記載されています。
https://swiperjs.com/api/#parameters

しかし上記の記載のままでは、選んだタブが常に左端にきてしまいます。「その番号のタブまでスライドする」というのが、「その番号のタブを一番左端にもってくる」ということになっているようで、これはSwiper.jsの仕様のようなので、少し工夫をしないといけません。

slidesPerView: 5としているので、タブは常に5つが横並びになりますよね。
とすると、currentの番号のタブ（選んだもの）を真ん中に持っていきたいということは、
current - 2 の番号のタブを一番左にもってくればよい。ということになります。

          ↓これを真ん中にしたいということは
| 1 | 2 | 3 | 4 | 5 |
  ↑これが一番左にくればよい

なので、タブを動かす動きを以下のように書き換えれば、選んだタブが中央に移動するはずです。

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

なお、現在書かれているコードではgalleryThumbsのonパラメータの中でクリック時の動きを定義されていますが、その書き方だとgalleryTopのactiveIndexが切り替わる前に実行されてしまうようで、うまく動かないようです。

Comments

[kenshin]

本当に回答ありがとうございます。

回答のようにやりなおしたら、うまくいきました。ただ、
タブメニューをスクロールした時に上部に固定できなくなりました。
上部に固定する方法はないでしょうか？

[hwatarig]

cssのglobal-navに対するスタイル指定部分が間違っているせいかと思います。
idに対してスタイルを掛ける際は#を先頭につけてください。

#global-nav {

#global-nav.m_fixed {

[kenshin]

助かりました。ありがとうございました。