bxsliderのコンテンツの高さの可変

Question

スマートニュースやグノシーのような、スワイプタブ切替機能を実装する
こちらのサイトを参考に制作を行ったのですがスワイプタブをスライダーで切り替えを行った時にコンテンツの中身によって一番高いコンテンツだと揃わないのですがコンテンツの中身の高さに合わせて可変するようにしていのですがどうしたらよいのでしょうか？ご教授宜しくお願いいたします。

●参考にしてページＵＲＬ●
https://www.tam-tam.co.jp/tipsnote/html_css/post9210.html

●ＵＲＬ●
[http://satoru4518.html.xdomain.jp/slideTab/index.html]

Comments

[kimurayu]

urlをリンクにしてください

[kimurayu]

コンテンツの中身によって一番高いコンテンツで揃わない とは何ですか

[satoru32]

遅くなりすいません，URLを制作しました。

[kimurayu]

コンテンツが一番少ない物に高さを合わせて余白が出ないようにするということですか？
あと、URLをタグで囲んで下さい。地球のマークがあります

[satoru32]

そうです、ＵＲＬをタグで囲みました。ご教授宜しくお願いいたします。

[kimurayu]

これはbody要素でスクロールしているので、一番低いコンテンツの高さがbodyの高さになるように一つのニュースの高さを変えるか、body要素の中に一番低いコンテンツの高さに合わせたボックスを作りその中にコンテナーを入れて、そのボックスでスクロールするか、の二つの方法があります。どちらが良いですか？

Answer 1

これはbody要素でスクロールしているので、
0. タブも含めた一番低いコンテンツの高さがbodyの高さ以上になるように一つのニュースの高さを高くする

1. body要素の中にタブも含めた一番低いコンテンツの高さ以下の高さのボックスを作り、その中にコンテナーを入れて、そのボックスでスクロールする

のどちらかの方法だと思います。

Answer 2

期待されている動作を勘違いしていました。
beforeChangeイベントで移動先のコンテンツの高さを取得し、カルーセルを大外の高さをその高さにすれば、どうでしょうか？

Comments

[satoru32]

CSSで設定すると一番高さを指定するとその他のコンテンツの下に大きなスペースが出来てしまってレイアウト的によくないと思います。

[satoru32]

JSの知識が疎くてすいません、そのほかのコンテンツの高さにも対応できるようにタブを押したときに該当するボックスの高さが可変すれば良いと思ったのですがそれは難しいでしょうか？
宜しくお願いします。

[satoru32]

beforeChangeイベントで異動先のコンテンツの高さを取得すれば高さは可変になりますでしょうか？
出来ればj-queryの書き方など分かれば教えてください。
宜しくお願いします。

Answer 3

bxsliderのオプションのadaptiveHeight:true,の設定をした所コンテンツの高さが可変したので解決出来ました！
皆様アドバイスをしていただきありがとうございました！