updated: 2018.11.14
サイドメニュー － メインページ ---- swiper 1
[メインページ内] コンテンツ１ － コンテンツ２ － コンテンツ３ ---- swiper 2
swiper 2 が swiper 1 の中に入れ子になっている場合、swiper2 の swiper-slide-prev が swiper 1 に干渉して表示される。
solution:
.swiper-slide-prev {
display: none
}
これだと vue-awesome-swiper が正常に動作しなくなる。
.swiper-slide-prev {
margin-right: foo px;
}
これでもうまくいかない。
.swiper-slide-prev {
visibility: hidden;
}
解決
display: none ボックス自体を無くす
visibility: hidden ボックスは無くさないが非表示にする。レイアウトが崩れない。
参考：
related:
swiper-container がスワイプ可能域
swiper1 > swiper-container と swiper2 > swiper-container の画面配置でスワイプのコントロールが可能になる。
problem:
swiper2 (メインページ) の上に swiper1 (サイドメニュー) がレイヤーしてほしいが swiper1 と swiper2 が入れ子なので z-index が使えず、clip で .swiper2 .swiper-container の表示を削って swiper-container のレイヤー構造はできたが .swiper2 > .swiper-container > swiper-slide を swiper-container の上に表示させる方法が見つからなかった。(swiper-slide ごと clip で表示が削られる)
またCSS3 では clip は非推奨。
サイドメニュースワイプ可能域を左側に20px取り、メインページにpadding-left: 20px を設定することで妥協
update：
上記妥協案を取らずに根元から変更
side-nav(スワイプ対応 left to right)は vuetify の navigation-drawer
メインページのスワイプ(right to left) は vue-hammer を使ってイベント発火でcomponent の切り替え
を使ったほうがスムーズに実装できた。
