7

flexslider を使用すると奇妙な問題が発生します。すべてのスライドが表示されるように、スライド LI は正しい幅を取得しません。これは、最初のページの読み込み時にのみ発生します。別のタブに切り替えて元に戻すとすぐに、すべてが正常に見えます。多分JSの読み込みの問題?!

スクリーンショット：こちら

flexslider.css

.flexslider {margin: 0; padding: 0;}
.flexslider .slides > li {text-align: center; display: none; -webkit-backface-visibility: hidden;} /* Hide the slides before the JS is loaded. Avoids image jumping */
.flexslider .slides li.flex-active-slide img {text-align:center; width: auto; -webkit-border-radius: 6px; -moz-border-radius: 6px; -o-border-radius: 6px; border-radius: 6px; box-shadow: 0 1px 4px rgba(0,0,0,.2); -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); }

JS

$(window).load(function() {
    $('.flexslider').flexslider({
        controlNav: true,
        directionNav: true
    }); 
});

$(document).ready(function() でも試しましたが、それでも同じ問題です。

何か案は？

4

8 に答える 8

16

さて、ヴェルナー。

私はあなたの解決策に行き着きました。不運にも。

それ以外の場合、これは別の方法です。

/* SLIDERS in content */
$('.flexslider').flexslider({
    animation: "slide", 
    start: function(slider){
        $('.flexslider').resize();
    }
});

上記のコードを使用しないことにした理由は、スライドが正しい幅に更新されたときに遅延が発生し、少しジャンプしたためです。

誰かがよりクリーンなソリューションを持っている場合は、教えてください。私は最新の flexslider を使用していますが、この問題は時々発生するようです。しかし、そうなると... うーん。

于 2013-02-06T14:34:24.183 に答える
5

私も同じ問題を抱えていました。

セッションでの最初のロード時に、Flexslider はスライダー コンテナーの幅を取得します。明示的でない場合、値は 0px です。次に、スライドの幅が 0px になり、スライドが表示されなくなります。

この問題を回避するには、スライダー コンテナーの幅 (私の場合は 604px) を修正するだけで十分です。

<div class="flexslider" style="width: 604px">
    <ul class="slides">
        <li>
            <img id="slide1" />
        </li>
        <li>
            <img id="slide2" />
        </li>
    </ul>
</div>
于 2013-01-30T11:11:10.993 に答える
0

以下のこのコード/注文が役立つ場合があります。少なくとも私はそれで成功しました。 

<script src="js/jquery-1.8.3.min.js"></script>
<script src="js/jquery.easing.js"></script>
<script defer src="js/jquery.flexslider-min.js"></script>
<script>
$(document).ready(function(){
    $('.flexslider').flexslider({
        controlNav: true,
        directionNav: true,
     });
}); 
</script>
于 2013-01-16T00:14:17.903 に答える
0

なぜこれを行っているのかがわかりましたが、それは非常に簡単です。

それはCSSのせいです!!! スライダーのulに。

ul.slides のパディングとマージンを取り除きます

.slides{
    padding:0;
    margin:0;
}

これを行った後、サイズ変更はすべてのブラウザーとモバイルで毎回完璧に機能しました。

于 2015-02-11T11:27:46.533 に答える
0

minItemsflexslider 呼び出しを削除することで、この問題を解決しました。でも動作するmaxItemsようです。

于 2013-07-19T00:17:56.570 に答える
0

別の回答には少し遅れているかもしれませんが、ここや他のフォーラムですべての回答を試した後、他の回答と同様の独自の解決策にたどり着きましたが、少なくともかなり首尾一貫していてきれいだと思います。

タイトルをクリックするとすぐに開かれるタブ内にスライダーがあるモバイル環境で問題が発生しました。コンテンツは にdisplay:noneあり、これにより flexslider (v. 2.5) に問題が発生し、含まれているスライドの正しい幅を判断できません。

だから私はCSSを修正し、可視性と不透明度で遊んでコンテナを隠しました。

HTML サンプル

<dd class="tab-container with-slider">
    <div class="flexslider">
       <ul class="slides">
          <li>whatever </li>
       </ul>
    </div>
</dd>

CSS:

/*all other containers behave well with display none/block so I leave them with normal behavior*/
 .parent dd.tab-container {  
        display: none; position: relative; 
 }
/*container with flexslider inside uses visibility and opacity to be hidden*/  
.parent dd.tab-container.with-slider{ 
     display: block; 
     height: 0px; 
     visibility: hidden; 
     opacity: 0;
 } 
.parent.accordion-open dd.tab-container.with-slider{ 
     height: auto; 
     visibility: visible; 
     opacity: 1;
 }

Js は、基本的な例から単純であり、それ以上のものではありません。

$j('.myTabOpener').click(function () {  
    var mySlider = $j(this).find('.flexslider');
    mySlider.flexslider({
        animation: "slide",
        animationLoop: false,
        itemWidth: 210,
        itemMargin: 5,
        minItems: getGridSize(), 
        maxItems: getGridSize()
    });  
});
于 2017-10-20T09:21:32.717 に答える