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

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

ただいまの
回答率

87.37%

swiperサムネイル連動型スライダーで、サムネイルのactiveクラスが動かない

解決済

回答 1

投稿

  • 評価
  • クリップ 0
  • VIEW 3,967

score 32

お世話になっております。

現在swiperを使用したサムネイル連動型スライダーを作成しております。

・メインスライダーはループ
・サムネイルはループしない という仕様になっています。

メインスライダーを矢印で移動するとサムネイルも動き、サムネイルをクリックするとメイン画像も切り替わるのですが、
サムネイルの.swiper-slide-activeクラスが1枚目から動かず困っております。

サムネイルをクリックしてもメインスライダーを切り替えても同じく.swiper-slide-activeが移動しません。

codepenはこちらになります。
(メインスライドの見た目が汚くて申し訳ありません。。)

やってみたこと
clickイベントで手動でクラスをつけ外す 
ー> サムネイルをクリックしたときはうまくいくのですが、メインスライダーとの連携がかえってややこしくなり、やめました。

サムネイルスライダーをloop: true,centeredSlides: trueにする
ー> これだとサムネイルのactiveクラスが移動するのを確認できました。
ただ今回の仕様とは違うので、こちらもやめました。

どのようにすればサムネイルの.swiper-slide-activeクラスが移動してくれるのでしょうか。
どなたか、ご教示いただけませんでしょうか。何卒よろしくお願いいたします。

コードは以下になります。
文字数がオーバーしたため、メインスライダーのアイテム数を減らしております。

<head><link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.5.0/css/swiper.min.css"></head>     

<section id="cafe_menu" class="bl_menu ly_section">
        <div class="ly_inner">
          <div class="swiper-container swiper-menu">
            <div class="swiper-wrapper">
              <div class="el_cb bl_menu_slideContent swiper-slide">
                <div class="bl_menu_slideleft">
                  <div class="bl_menu_imgWrapper">
                    <img src="https://placehold.jp/1500x800.png" alt="">
                  </div>
                </div>
                <div class="bl_menu_body fade">
                  <h3 class="el_lv3_ttl">オリジナルコーヒー1</h3>
                  <div class="bl_menu_txt">
                    1説明がはいります。説明がはいります。説明がはいります。説明がはいります。説明がはいります。説明がはいります。説明がはいります。説明がはいります。説明がはいります。説明がはいります。 </div>
                </div>
              </div>
              <div class="el_cb bl_menu_slideContent swiper-slide">
                <div class="bl_menu_slideleft">
                  <div class="bl_menu_imgWrapper">
                    <img src="https://placehold.jp/578beb/ffffff/1500x800.png" alt="">
                  </div>
                </div>
                <div class="bl_menu_body fade">
                  <h3 class="el_lv3_ttl">オリジナルコーヒー3</h3>
                  <div class="bl_menu_txt">
                    3説明がはいります。説明がはいります。説明がはいります。説明がはいります。説明がはいります。説明がはいります。説明がはいります。説明がはいります。説明がはいります。説明がはいります。 </div>
                </div>
              </div>

            </div>
            <div class="swiper-button-prev swiper-menu-prev"></div>
            <div class="swiper-button-next swiper-main-next"></div>
          </div><!-- swiper-menu -->
          <!-- swiper thumbnail -->
          <div class="swiper-thumb-parent">
            <div class="swiper-container swiper-menuThumb">
              <div class="swiper-wrapper bl_img_thumbUnit">
                <li class="swiper-slide">
                  <div class="bl_thumb_wrapper">
                    <img src="https://placehold.jp/1500x800.png" alt="サムネイル"></div>
                </li>
                <li class="swiper-slide">
                  <div class="bl_thumb_wrapper">
                    <img src="https://placehold.jp/57d2eb/ffffff/1500x800.png" alt="サムネイル"></div>
                </li>
                <li class="swiper-slide">
                  <div class="bl_thumb_wrapper">
                    <img src="https://placehold.jp/578beb/ffffff/1500x800.png" alt="サムネイル"></div>
                </li>
                <li class="swiper-slide">
                  <div class="bl_thumb_wrapper">
                    <img src="https://placehold.jp/578beb/ffffff/1500x800.png" alt="サムネイル"></div>
                </li>
                <li class="swiper-slide">
                  <div class="bl_thumb_wrapper">
                    <img src="https://placehold.jp/578beb/ffffff/1500x800.png" alt="サムネイル"></div>
                </li>
              </div>
              <div class="swiper-button-prev"></div>
              <div class="swiper-button-next"></div>  
            </div>
            <div class="swiper-button-prev-a"></div>
            <div class="swiper-button-next-a"></div>
          </div>
          <!-- swiper thumbnail -->
      </section><!-- /#cafe_menu .ly_section -->

  <script
  src="https://code.jquery.com/jquery-3.5.1.min.js"
  integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0="
  crossorigin="anonymous"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.5.0/js/swiper.min.js"></script>
$(function ($) {

    // サムネイル用のスライダー
  var thumbSlide = new Swiper('.swiper-menuThumb', {
    slidesPerView: 'auto',
    touchRatio: 0.2,
    navigation: {
      nextEl: '.swiper-button-next',
      prevEl: '.swiper-button-prev',
    },
  });

  // menu section メインスライダー
  var mainSlide = new Swiper('.swiper-menu', {
    effect: 'fade',
    loop: true,
    loopedSlides: 6,
    allowTouchMove: false,
    fadeEffect: {
      crossFade: false,
    },
    navigation: {
      nextEl: '.swiper-button-next',
      prevEl: '.swiper-button-prev',
    },
    thumbs: {
      swiper: thumbSlide
    }
  });
  // メインのスライドが動いた時にサムネイルも連動させる
  mainSlide.on('slideChange', () => {
    // realIndex は現在activeになっているスライドの番号が入っている
    thumbSlide.slideTo(mainSlide.realIndex);
  });
  // サムネイルをスライドした時にメインスライドを連動させる(上記と同じ)
  thumbSlide.on('slideChange', () => {
    mainSlide.slideToLoop(thumbSlide.realIndex);
  });

    //擬似ボタンクリックで本物のボタンをクリック
  const swiperPrev = document.getElementsByClassName('swiper-button-prev-a');
  const swiperNext = document.getElementsByClassName('swiper-button-next-a');
  for (let i = 0; i < swiperPrev.length; i++) {
    swiperPrev[i].addEventListener('click', (e) => {
      const parent = e.target.parentNode;
      const prev = parent.getElementsByClassName('swiper-button-prev')[0];
      prev.click();
    });
  }
  for (let i = 0; i < swiperNext.length; i++) {
    swiperNext[i].addEventListener('click', (e) => {
      const parent = e.target.parentNode;
      const next = parent.getElementsByClassName('swiper-button-next')[0];
      next.click();
    });
  }


 });
.bl_menu {
  position: relative;
  width: 800px;
}
.swiper-container.swiper-menu {
  max-width: 100%;
  padding: 40px;
  margin-right: auto;
  margin-left: auto;
}
.bl_menu_slideContent {
  // width: 100% !important;
}
.swiper-thumb-parent { // for 矢印外だし
  position: relative;
  width: 600px;
  max-width: 100%;
  padding: 20px 40px;
  margin-right: auto;
  margin-left: auto;
}

.bl_menu .swiper-container.swiper-menuThumb {
  & .bl_img_thumbUnit li {
    width: auto;
    max-width: auto;
  }

  & .swiper-slide {
    width: 60px !important;
  }
}

.swiper-thumb-parent .swiper-button-prev{
  //画像にしないとopacity効かない
  content: '';
  display: inline-block;
  width: 40px;
  height: 40px;
  border-left: 2px solid #333;
  border-bottom: 2px solid #333;

}

.swiper-button-prev.swiper-menu-prev,
.swiper-button-next.swiper-main-next {
  outline: none;
  -webkit-tap-highlight-color:rgba(0,0,0,0);
  }

//元のボタンを飛ばす
.swiper-menuThumb .swiper-button-prev {
  left: -100%;
}
.swiper-menuThumb .swiper-button-next {
  right: -100%;
}

//新たなボタンを設置
.swiper-button-prev-a {
  content: '';
  left: -40px;
  top: 32%;
  display: inline-block;
  width: 40px;
  height: 40px;
  border-left: 2px solid #333;
  border-bottom: 2px solid #333;
  position: absolute;
  transform: rotate(45deg);
}

.swiper-button-next-a {
  content: '';
  right: -40px;
  top: 32%;
  transform: rotate(-135deg);
  display: inline-block;
  width: 40px;
  height: 40px;
  border-left: 2px solid #333;
  border-bottom: 2px solid #333;
  position: absolute;
}

.swiper-button-prev-a,
.swiper-button-next-a {
  background-position: center center;
  background-size: cover;
  background-repeat: no-repeat;
}

.bl_menu_slideContent {
  width: 100%;
  margin: auto;
  background: pink;
  padding: 30px 20px;
}

.swiper-menuThumb .swiper-slide-active {
  border: 2px solid #333;
}

.bl_menu_imgWrapper {
   position: relative;
  overflow: hidden;
  height: 0;
  padding-top: 70%;
  width: 100%;
  & > img {
    position: absolute;
    top: 50%;
    width: 100%;
    height: 100%;
    transform: translateY( -50% );
    object-fit: cover;
    font-family: 'object-fit: cover;' /*ie*/
  }

}
.bl_img_thumbUnit {
  & li {
    cursor: pointer;
    margin-left: 7px;
    margin-bottom: 7px;
    width: 15%;
    max-width: 114px;
    border: 2px solid transparent;
    &:hover img {
      opacity: .8;
    }
  }
  .bl_thumb_wrapper {
      position: relative;
  overflow: hidden;
  height: 0;
  padding-top: 60%;
  & > img {
    position: absolute;
    top: 50%;
    width: 100%;
    height: 100%;
    transform: translateY( -50% );
    object-fit: cover;
    font-family: 'object-fit: cover;' /*ie*/
  }
  }
  & li.current {
    border: 2px solid #333;
  }
}

長くなってすみません。何卒よろしくお願いいたします。

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

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

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

    クリップを取り消します

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

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

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

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

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

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

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

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

    質問の評価を下げる

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

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

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

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

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

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

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

    詳細な説明はこちら

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

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

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

回答 1

check解決した方法

0

swiper公式のデモをよく見たところ、アクティブなサムネイルには.swiper-slide-thumb-activeがついていることに気がつきました。

公式でもサムネイルの.swiper-slide-activeは左端から動かない挙動は同じなので、仕様のようです。

IE対策として4系を使用していたのですが、.swiper-slide-thumb-activeがつくのは5系から?
ぼいので5系に変えて、.swiper-slide-thumb-activeを利用したらうまく行きました!

投稿

  • 回答の評価を上げる

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

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

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

  • 回答の評価を下げる

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

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

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

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

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

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

閲覧数の多いJavaScriptの質問