スワイプタブ切替で高さが異なる要素を余白を出さずに表示したい

Question

###前提・実現したいこと
スマートニュースやグノシーのような、スワイプタブ切替機能を実装する
↑↑↑↑↑↑↑
上記のコードを用いて異なる高さのタブ要素を内容の高さごとに変動させたい

###発生している問題・エラーメッセージ
各タブ要素の高さが異なります。
スマホ表示のみの実装なのですが、タブ内容の高さが最大で2356px、最小で523pxになります。
※その他に高さが異なるタブ内容が複数あります。

ですが、全て最大の高さに揃えられ、他の要素表示の際に、余白が大幅に出てしまいます。

これを、内容ごとに余白を出さずに高さ変動させたいです。

###試したこと
CSSで内容に個別で高さ指定をしてみましたが、表示されなかったり余白が残ったままになりました。

JQueryにコードを追記しようとしたのですがどうしていいかわからず、解決できる方がいらっしゃいましたらご教授頂けると幸いです。
よろしくお願いいたします。

Answer 1

これでどうでしょう。

var slider = $('.contents').bxSlider({
    pager:false,
    controls:false,
    adaptiveHeight:true,		// add
    onSlideBefore: function($slideElement, oldIndex, newIndex){
        //スライドする時に関数を呼び出す。newIndexはスライダーの現在地。
        slideChange(newIndex);
    }
});

【Options | Responsive jQuery Slider | bxSlider】
http://bxslider.com/options#adaptiveHeight

Comments

[asami12]

ご回答ありがとうございます。
試して見ましたが、下記の問題が発生しました…

・タブと内容がズレていた
・余白も残ったまま
・最大の高さの要素に関しては途中から表示が切れていた
・スクロールがしずらくなっていた

ご教授頂いたに申し訳ございません。
やはり余白を消すことは難しいのでしょうか…？

[kei344]

とりあえず現状問題が起きるサイトのURL、もしくは状況の再現が可能なHTML/CSSを質問文に追記ください。

> 余白を消すことは難しいのでしょうか…？
下記例のように動くものなので、CSSやHTMLの組み方の問題の可能性もあります。

【Examples | Responsive jQuery Slider | bxSlider】
[http://bxslider.com/examples/slideshow-adaptive-height](http://bxslider.com/examples/slideshow-adaptive-height)

[asami12]

解決致しました！
ご指摘頂きました通り下記に追記しました。

/******************************************
スライダー発動
*******************************************/

var slider = $('.contents').bxSlider({
pager:false,
controls:false,
adaptiveHeight:true, // add
onSlideBefore: function($slideElement, oldIndex, newIndex){
//スライドする時に関数を呼び出す。newIndexはスライダーの現在地。
slideChange(newIndex);
}
});

先程実装が確認できなかったのはCSSにて個別指定していた高さを削除し忘れていた為でした。
大変申し訳ございません。

kei344様、ご教授頂き誠にありがとうございました。
助かりました。