【解決】[js]swiperでぶつかった問題のメモ。未解決。

bxsliderの動作がどうにも気に入らないので乗り換えを考えてる。

やりたいこと

幅で切り替えるレスポンシブデザインで組んでる。
その中で設置するスライドでは、PCとスマホで表示する画像のサイズを違うものにしたい。
一般的な手法としては、PC・SPそれぞれ用のスライドを作り、任意のタイミングで表示・非表示を切り替える。
bxsliderでそれをやると、PC→SP→PCみたく1周した時にスライドが表示されない症状が出た。
切り替えをcssでやったからか?jsでならできるのか?そこはまだ未検証。
まあでも幅指定をあっちこっちでやってると何かの時にズレて面倒が起きると嫌なので、
じゃあ違うのに乗り換えようってなった。
スライド動作が何かのタイミングで変になったりとかもあったしね。

それぞれ用意して切り替え

こんな感じで作ってみた

ブラウザ幅750pxで切り替わる。
切り替わるんだけど、自動送りが効かなくなる。
.swiper-container自身に表示・非表示を持たせてるけど、
親を作ってそっちでやっても同様になる。
display:none;をvisibility:hidden;にしても同じ。
まあ非表示中も動かれちゃ処理がたまったもんじゃないってことなんかな、とも思う。
ページ読み込み時は両方回ってるけど。

読み込み画像を書き換える

例えばこんな感じ。

ファイル名を置換するので当然読み込み画像は変更される。
だけど切り替えると表示がぶっ壊れる。
却下。

言い訳など

知恵を絞れば越えられる山だと思ったんだけど甘かったらしい。
探せば望みのものが出てくるかもしれない。
初めからそっちでやってればよかったかもしれない。

こういう切り替えは普通useragentの切り替えに合わせてやってる感じがある。
それに勝ちたかっただけなんだ。

20180906追記:解決

コメントのアドバイスに従ったらできた。
人に教えてもらえる有り難さったらない。
本当にありがとうございました。

端的にいうと、パラメータに「observer: true」または「observeParents: true」もしくは両方突っ込めば動く。
調べると動作が遅いっぽいとか出てきたけど、背に腹。

上記でやった、PC/SPそれぞれのスライドを作って表示/非表示切り替えるやつにはダメ。
ついでにこういうのもダメ。

動的になんちゃらしたい場合はjsで書き換えましょう、ということみたい。

シェアする

  • このエントリーをはてなブックマークに追加

フォローする

コメント

  1. yatokesa より:

    これを生成時のパラメータに追加してみてはどうでしょう
    observer: true
    observeParents: true
    ずいぶんと悩まされました。

    • megefeps より:

      コメントありがとうございます。
      できました!
      パラメータちゃんと調べずにいじってたのがバレちゃいました。
      お恥ずかしい限りです。