質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

87.49%

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

解決済

回答 1

投稿 編集

  • 評価
  • クリップ 0
  • VIEW 480

score 7

|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番などを押す場合(順番に押さない場合)に、うまくいかなかったので、その後のコードによって、うまくいかなくなったのではないです。
よろしくお願いします。

  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 過去に投稿した質問と同じ内容の質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

質問への追記・修正、ベストアンサー選択の依頼

  • hwatarig

    2020/03/04 21:46

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

    キャンセル

  • hwatarig

    2020/03/05 00:08

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

    キャンセル

回答 1

checkベストアンサー

+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
末尾の});が多すぎます。

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2020/03/06 18:38

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

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

    キャンセル

15分調べてもわからないことは、teratailで質問しよう!

  • ただいまの回答率 87.49%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

同じタグがついた質問を見る

  • トップ
  • jQueryに関する質問
  • (swiperでメニューボタンを押した時に、センター表示にしたい。)前回の質問が解決していませんでした。