swiperで要素の高さが変わった場合に、スライド自体の高さも変更したい

Question

前提・実現したいこと

swiperを使用しています。

スライド内の要素の高さが、
アコーディオンなどで変化した場合にスライドからはみ出てしまいます。

こちらを、要素の動的な変化にあわせ、スライドの高さを変更するようにしたいです。

該当のソースコード

こちらにサンプルを作成しました。
https://jsfiddle.net/heppokero/ujqaphbe/1/

試したこと

• オプション設定：observer:trueなど

• direction:vertical：縦のスワイプに変更

挙動がちょっと希望と異なる

• アコーディオンの書き換え

似たような事例なども検索したのですが、うまくみつけられませんでした;;;

---

お助けいただけると幸いです。
どうぞよろしくお願いします。

Answer 1

calculateHeightで実現できるかと思います。

~~const Contents = new Swiper('.js-swiper-contents', {
calculateHeight:true,
});
~~

すみません、再度確認したところ、calculateHeightのオプションはすでになくなっているものでした。
サンプルでうまく動いたと思っていたのですが、autoHeightを消したためうまく動作していたようです。

なので、autoHeightのオプションを設定しなければ、うまく動作するかと思います。
autoHeight

const Contents = new Swiper('.js-swiper-contents');

(autoHeightをtrueにすると、現在表示されているスライドのなかで最大の高さを持つものに高さが固定されます。)

Comments

[mochimo]

回答ありがとうございます！
swiperのドキュメント（https://swiperjs.com/swiper-api）に
calculateHeight:true の項目がみつからなかったのですが、
最新のswiperにもある要素なのでしょうか・・・？

[hayato7]

すみません、回答内容修正いたしました。
サンプルでは、autoHeightの設定をなくすだけで、swiper-wrapperに固定の高さがつかなくなり、アコーディオンの変化にあわせてスライドの高さが変わりました。

[mochimo]

ご確認ありがとうございます！
そうなのですよね、autoHeight外せば解決ではあるのですが、できれば付与したいオプションで・・・
もう少し検討してみます！ありがとうございました！

[hayato7]

そうなんですね、であれば今思いつくのはaccordion動作時にスライドの高さも調整するぐらいです。。。