応答性の高い caroufredsel を使用すると、Chrome と Firefox では魅力的に機能しますが、Safari では突然上下のマージンが 800px になり、すべてが台無しになります。
レスポンシブなサイトで、横幅500px以下のメディアクエリの影響を受けると不思議なことに問題が発生しません。
このサイトは wordpress のカスタム ビルドであり、すべての準備が整ったときにドメインがマッピングされるのをサーバー上で待機しています。
ライブページ:
http://109.203.120.0/~wirebird/wordpress/the-guitars/
静的 html バージョンは正常に動作しますが、それはワードプレスの問題ですか、それとも真のドメインをまだ使用していないという事実ですか?
以下のcaroufredselを起動するためのjquery：
jQuery(document).ready(function() {
jQuery("#guitars-gallery").carouFredSel({
auto: false,
circular: false,
prev: '#prev',
next: '#next',
responsive : true,
height : 500,
scroll: 1,
items : { width : 370, height : 500, visible : { min : 1, max : 3 } } });
});
function doSomething() {
jQuery('#guitars-gallery').trigger('destroy', true);
jQuery('#guitars-gallery').css({'text-align': '','float': '','position': '','top': '','right': '','bottom': '','left': '','width': '90%','height': '','margin': '1% auto'});
jQuery("#guitars-gallery").carouFredSel({
auto: false,
circular: false,
prev: '#prev',
next: '#next',
responsive : true,
height : 500,
scroll: 1,
items : { width : 370, height : 500, visible : { min : 1, max : 3 } } });
};
var resizeTimer;
jQuery(window).resize(function() {
clearTimeout(resizeTimer);
resizeTimer = setTimeout(doSomething, 100);
});
どんなアイデアでも大歓迎です、それは私を怒らせています!
更新:カルーセルが呼び出された後にjqueryを使用してスタイリングを変更することで、これを解決しました:
jQuery('.caroufredsel_wrapper').css({'margin-top': '0px', 'margin-bottom': '0px'});
問題は修正されましたが、なぜそれが起こったのかについてはまだわかりません:-)