Flexslider

Question

这是 flexslider 元素 '

<img alt="Zdjęcie" src="Image" />
<div>
    <span class="promoted-d-caption">Year</span>
    <span class="promoted-d-price" align="center">Price</span>
    <span class="promoted-d-title">Title</span>
    <span class="promoted-d-day-offer">Offer</span>
</div>

和css：

.promoted-d-title {
    position: absolute;
    bottom: 40px;
    padding: 10px;
    width: 100%;
    font-size: 1.7em;
}

.promoted-d-caption {
    position: absolute;
    bottom: 0px;
    padding: 10px;
    width: 100%;
}

.promoted-d-price {
    position: absolute;
    bottom: 0px;
    margin-left: 400px;
    width: 150px;
    padding: 5px;
    padding-top: 3px;
    font-size: 1.5em;
}
.promoted-d-day-offer {
    position: absolute;
    bottom: 90px;
    margin-left: 430px;
    width: 120px;
    padding: 5px;
    font-size: 1.5em;
    z-index: 1001;
}

显示正常，但"sliding"动画时，部分跨度消失，动画完成后出现（下一张图片在正确位置时）。

可能是什么原因？为什么只有部分元素消失了？

var slider = $('#test').flexslider({
  animation: "slide"
});

.promoted-d-title {
    position: absolute;
    bottom: 40px;
    padding: 10px;
    width: 100%;
    font-size: 1.7em;
     background: #fffff0;
}

.promoted-d-caption {
    position: absolute;
    bottom: 0px;
    padding: 10px;
    width: 100%;
          background: #fffff0;
}

.promoted-d-price {
    position: absolute;
    bottom: 0px;
    margin-left: 400px;
    width: 150px;
    padding: 5px;
    padding-top: 3px;
    font-size: 1.5em;
          background: #fffff0;
}
.promoted-d-day-offer {
    position: absolute;
    bottom: 90px;
    margin-left: 430px;
    width: 120px;
    padding: 5px;
    font-size: 1.5em;
    z-index: 1001;
          background: #fffff0;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/flexslider/2.6.3/flexslider.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/flexslider/2.6.3/jquery.flexslider.min.js"></script>


<div class="col-md-12 main-promoted-area">
    <table style="width: 100%">
        <tr>
            <td></td>
            <td rowspan="2" style="width: 550px">
                <div id="test" class="flexslider d-promoted">
                    <ul class="slides">
                        <li>
                            <div class="">
                                <img alt="Zdjęcie" src="http://vignette3.wikia.nocookie.net/thecornerclub/images/e/e1/Blast_500x500-1-.jpg/revision/latest?cb=20150213022400" />
                                <div>
                                    <span class="promoted-d-caption">Year</span>
                                    <span class="promoted-d-price" align="center">Price</span>
                                    <span class="promoted-d-title">Title</span>
                                    <span class="promoted-d-day-offer">Offer</span>
                                </div>
                            </div>
                        </li>
                        <li>
                            <div class="">
                                <img alt="Zdjęcie" src="http://vignette3.wikia.nocookie.net/thecornerclub/images/e/e1/Blast_500x500-1-.jpg/revision/latest?cb=20150213022400" />
                                <div>
                                    <span class="promoted-d-caption">Year</span>
                                    <span class="promoted-d-price" align="center">Price</span>
                                    <span class="promoted-d-title">Title</span>
                                    <span class="promoted-d-day-offer">Offer</span>
                                </div>
                            </div>
                        </li>
                    </ul>
                </div>
            </td>
            <td></td>
        </tr>
    </table>
</div>

Answer 1

添加以下 CSS 规则，您的问题将得到解决。

.slides li div {
    position: relative;
}

而不是用 position: absolute 放置单个元素，最好只放置一个具有绝对定位的父元素和所有具有正常样式的子元素，如下所示：

<div class="caption-area">
     <span class="promoted-d-title">Title</span>
     <span class="promoted-d-caption">Year</span>
     <span class="promoted-d-price">Price</span>
     <span class="promoted-d-day-offer">Offer</span>
 </div>

具有以下样式：

.slides li div.caption-area {
    position: absolute;
    z-index: 10;
    bottom: 0;
    right: 0;
    left: 0;
}

var slider = $('#test').flexslider({
  animation: "slide"
});

.slides li div {
    position: relative;
}
.slides li div.caption-area {
    position: absolute;
    z-index: 10;
    bottom: 0;
    right: 0;
    left: 0;
}

.promoted-d-title {
    display: block;
    margin-bottom: 2px;
    padding: 10px;
    font-size: 1.7em;
    background: #fffff0;
}

.promoted-d-caption {
    display: block;
    padding: 10px;
    background: #fffff0;
}

.promoted-d-price {
    position: absolute;
    bottom: 0px;
    right: 0;
    width: 150px;
    padding: 5px;
    padding-top: 3px;
    font-size: 1.5em;
    background: #fffff0;
}
.promoted-d-day-offer {
    margin-left: auto;
    display: block;
    width: 120px;
    padding: 5px;
    font-size: 1.5em;
    background: #fffff0;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/flexslider/2.6.3/flexslider.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/flexslider/2.6.3/jquery.flexslider.min.js"></script>


<div class="col-md-12 main-promoted-area">
    <div id="test" class="flexslider d-promoted">
        <ul class="slides">
            <li>
                <div>
                    <img alt="Zdjęcie" src="http://vignette3.wikia.nocookie.net/thecornerclub/images/e/e1/Blast_500x500-1-.jpg/revision/latest?cb=20150213022400" />
                    <div class="caption-area">
                        <span class="promoted-d-day-offer">Offer</span>
                        <span class="promoted-d-title">Title</span>
                        <span class="promoted-d-caption">Year</span>
                        <span class="promoted-d-price">Price</span>
                    </div>
                </div>
            </li>
            <li>
                <div>
                    <img alt="Zdjęcie" src="http://vignette3.wikia.nocookie.net/thecornerclub/images/e/e1/Blast_500x500-1-.jpg/revision/latest?cb=20150213022400" />
                     <div class="caption-area">
                         <span class="promoted-d-day-offer">Offer</span>
                         <span class="promoted-d-title">Title</span>
                         <span class="promoted-d-caption">Year</span>
                         <span class="promoted-d-price">Price</span>
                     </div>
                 </div>
             </li>
         </ul>
     </div>
</div>

Flexslider - 滑动时消失的元素

Flexslider - disappearing elements on sliding

css