1

flexslider を使用して、ホームページのスライダーを作成しています。

字幕に問題があります。スライドを変更すると、すべてのスライドのキャプションが、スライドの変更中ではなく、スライドの停止後に表示されます。

私のCSSコード：

.front-page-slider{
position: relative;
width: 900px;
padding: 0;
margin-top: 28px;
}

.flexslider ul.slides > li{
position: relative;
}


.flex-caption{
position:absolute;
width: 235px;
height: 445px;
z-index: 50;
top: 25px;
right: 25px;
background-color: #CDCDCD;
}

html

<div class="container front-page-slider">
<div class="flexslider">
    <div class="flex-viewport" style="overflow: hidden; position: relative;">
        <ul class="slides" style="width: 1800%; -webkit-transition: 0s; transition: 0s; -webkit-transform: translate3d(-900px, 0, 0);">
            <li class="clone" aria-hidden="true" style="width: 900px; float: left; display: block;">
                <a href="#" target="_blank"><img width="300" height="300" src="http://localhost/artech/wp-content/uploads/2013/10/radio-nippon-project.png" class="attachment-front-slider wp-post-image" alt="radio-nippon-project" draggable="false"></a>
                <div class="flex-caption"><h1>Radio Rippon</h1></div>
            </li>
                           /* More <li> with slides etc*/
        </ul>
    </div>
</div>

そしてjsコード

$('.flexslider').flexslider({
      animation: "slide",
      controlsContainer: ".front-page-slider",
      controlNav: false,
      slideshow: false
});

また、これを使用しているときに

top: 25px;
bottom: 0;
left: 0;

正しい方向にのみ正常に動作しています（次の矢印を押したとき）

上、左、右、下といろいろな組み合わせも試してみましたが、うまくいきませんでした。

よろしくお願いします。私の英語で申し訳ありません。

PS : jquery.flexslider-min.js (Flexslider 2) のみを使用しており、提供されている css は使用していません。

更新 1 : これは chrome (最新バージョン) でのみ発生しており、firefox (最新バージョン) では発生していないことに気付きました。IE10でさえありません。

4

2 に答える 2

2

私は最終的にそれを解決することができます。私はそれを機能させるために : を入れなければなり-webkit-backface-visibility: hidden;ませんでした。

この回答に触発されました:

固定位置の flexslider とスティッキー ナビゲーションを使用した chrome での配置の問題

于 2013-10-28T19:50:57.110 に答える