CODEWITHSUNDEEP
cssflexslider
pwas
pwas

Reputation: 3373

Flexslider - disappearing elements on sliding

Here is flexslider element '

<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>

And 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;
}

It is displayed properly, but while "sliding" animation, part of spans disappears and they appear when animation is completed (when next image is on it's proper position).

What could be reason? Why only part of elements disappears?

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>

Upvotes: 2

Views: 726

Answers (1)

Mohammad Usman
Mohammad Usman

Reputation: 39322

Add following CSS rule and your problem will be fixed.

.slides li div {
    position: relative;
}

And instead of placing individual elements with position: absolute, Its better to place only one parent with absolute positioning and all child elements with normal styling as shown below:

<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>

Having following styles:

.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>

Upvotes: 2

Related Questions