私は Flexslider2 ( http://flexslider.woothemes.com/thumbnail-controlnav.html ) を使用しており、プロジェクト内でこの奇妙なジャンプ効果を得ています。基本的には循環し、下の画像のようにフレームが崩壊します。リンクされた .js ファイルと flex スクリプトは、終了 body タグの直前にあります。また、Chrome 開発ツールからのエラーはありません。
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="js/libs/jquery-1.7.min.js">\x3C/script>')</script>
<script defer src="js/jquery.flexslider.js"></script>
<script type="text/javascript" src="js/lib/jquery.easing.min.js"></script>
<script defer src="js/jquery.mousewheel.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('.flexslider').flexslider({
animation: "slide",
start: function(slider){
$('body').removeClass('loading');
}
});
});
</script>
これは、パラメーターに合わせて変更した唯一の css です。どんな助けでもうねるでしょう!
.flexslider { margin: 0 auto 60px; max-width: 740px; background: #fff; border: 4px solid #fff; position: relative; -webkit-border-radius: 4px; -moz-border-radius: 4px; -o-border-radius: 4px; border-radius: 4px; -webkit-box-shadow: 0 1px 4px rgba(0,0,0,.2); -moz-box-shadow: 0 1px 4px rgba(0,0,0,.2); -o-box-shadow: 0 1px 4px rgba(0,0,0,.2); box-shadow: 0 1px 4px rgba(0,0,0,.2); zoom: 1; }
.flex-viewport { max-height: 2000px; max-width: 740px; -webkit-transition: all 1s ease; -moz-transition: all 1s ease; -o-transition: all 1s ease; transition: all 1s ease; }