monteecristoo’s blog

https://twitter.com/irakaarozo

vue-awesome-swiper で swiper を二つ使用し、かつ swiper-container を入れ子にした場合の swiper 同士の干渉エラー

updated: 2018.2.18

 

サイドメニュー - メインページ ---- swiper 1

[メインページ内]  コンテンツ1 - コンテンツ2 - コンテンツ3 ---- 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 ボックスは無くさないが非表示にする。レイアウトが崩れない。 

 

参考:

www.htmq.com

 

related:

monteecristoo.hatenablog.com

 

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 を設定することで妥協