Swiperがスマホでスワイプできない原因はモーダルウィンドウが重なっているのが原因だった

Swiperなのにスマホでスワイプできないという問題に1日苦しみました。原因は単純で、fixedにしたスマホ用のグローバルナビゲーション(メニュー)がスライダーの上にかぶっているからでした。見えてないけど被っていることに、chromeのデベロッパーツールをいじっていて気が付きました。

肝心の解決方法なんですが、スライダーのz-indexの値を大きくすることで対処しました。(20)しかしこれだとスライドの方が前面に表示され浮いてる状態になるのが難点です。メニューを開いた時だけ順序が入れ替わるjsとか実装できればいいのですが、今の知識ではこれしか思いつきませんでした。それも!importantを付けるというどうにもカッコ悪い方法です。

その後も諦めずに調べていたら、スマートな解決方法を見つけました！z-indexの操作は不要でした。メニューが非展開時はvisibility: hidden;で隠しておき、展開時のみvisibility: visible;にすればメニューが前面に来ます。コードを書いておきます。

  &.active {
    @include mq('sp') {
      opacity: 1;
      visibility: visible;
    }