レスポンシブ画像で caroufredsel プラグインを使用していますが、スライダーが画像の高さ全体を (サイズ変更前に) 取得しており、下部に大きなギャップが残っています。
ウィンドウの幅を常にチェックする必要があるため、この関数は window.resize 関数内で呼び出されています。表示されるアイテムの数を変える必要があるため、これを行う必要があります。ウィンドウが特定の幅を下回っている場合は、カルーセルを破棄してすべてのアイテムを表示する必要があります。
これが私のコードです：
$(document).ready(function(){
$(window).resize(function(){
var numItems;
var width = $(window).width();
if(width >=769) {
numItems = 5;
} else {
numItems = 3;
}
var carousel = $("#carousel");
$("#carousel").carouFredSel({
responsive : true,
scroll : 1,
items : {
visible : numItems,
width : 200
},
onCreate : function () {
carousel.parent().add(carousel).css('height', carousel.children().first().height() + 'px');
}
});
if (width <=480){
$("#carousel").trigger("destroy");
}
}).resize();//trigger the resize event on page load.
});
この質問の解決策: carouFredSel レスポンシブ高さは高さの問題を修正しますが、ウィンドウの幅に応じてアイテムの数を確認し、カルーセルを破棄/作成できることと組み合わせることができないようです。
どんな助けでも大歓迎です-私はここで髪を引き裂いています。ありがとう。
編集 私はまともな解決策を持っています。要件をわずかに変更しましたが、変更しなくてもうまくいったと思います。
小さな要件の変更は、変数「numItems」を使用する代わりに、プラグインの組み込みの最小アイテムと最大アイテムを使用したことです。実際には、これはブラウザー ウィンドウが小さくなるにつれて、項目の数が 5 > 4 > 3 になることを意味します。
次に、次の 2 つの質問からの回答を組み合わせました。
これにより、なんとか機能するようになりました。これが私が最終的に得たコードです：
$(document).ready(function(){
function imageCarousel() {
var carousel = $('#carousel');
var width = $(window).width();
if(width <=480) {
carousel.trigger('destroy');
}
else {
carousel.carouFredSel({
auto: true,
responsive: true,
height : 'auto',
scroll: {
items : 1
},
swipe: {
onTouch: true,
items: 3
},
items : {
visible : {
min : 3,
max : 5
},
width : 200
},
onCreate : function () {
carousel.parent().add(carousel).css('height', carousel.children().first().height() + 30 + 'px');
}
});
}
$("#prev").on("click", function(){
$("#carousel").trigger("prev");
});
$("#next").on("click", function(){
$("#carousel").trigger("next");
});
};
var resizeTimer;
$(window).resize(function() {
clearTimeout(resizeTimer);
resizeTimer = setTimeout(imageCarousel, 0);
}).resize();
});
これが誰かに役立つことを願っています。