CODEWITHSUNDEEP
jqueryhtmlcssslider
jperezov
jperezov

Reputation: 3181

First slide in unslider not displaying properly

I am using Unslider to display some content on my website. It works great, but unfortunately, the first slide is off when the page loads (the height is 310px when it should be 110px).

It also renders the page before the Unslider code takes effect, which is most likely the reason for the aforementioned height issue. I stopped the rendering of the page, and the height of the <li> element is 310px before the unslider code resizes it upon revisiting the slide.

I would like to prevent both the "pre-rendering" and the resulting improper height of the first slide.

DEMO

To illustrate the example visually, this is what occurs initially:

[TITLE 1]
[SLIDE 1 CONTENT] [IMAGE 1]
[TITLE 2]
[SLIDE 2 CONTENT] [IMAGE 2]
...etc (note visual width/height)

then, after half a second of loading time, it will properly show the slides (which also corrects the width):

[TITLE 1]                             [IMAGE 1]
[SLIDE         1      CONTENT]


height maintained

The code I have is as follows:

CSS:

.hp_slideshow {
    position: relative;
    overflow: auto;
    width:592px;
}
    .hp_slideshow ul { padding: 0; }
    .hp_slideshow li {
        list-style: none;
        position: relative;
        width: 100%;
        padding: 0;
    }
        .hp_slideshow ul li { float: left; }

JS:

$(function() {
    $('.hp_slideshow').unslider({
        dots: true,
        delay: 4000,
        keys: true
    });
});

HTML:

<div class="hp_slideshow">
    <ul>
      <li>
        <img style="float:right;"/>
        <h2>Title</h2>
        <p>Content</p>
      </li>
      (repeat for 5 slides)
    </ul>
</div>

Upvotes: 2

Views: 2815

Answers (3)

Hamit YILDIRIM
Hamit YILDIRIM

Reputation: 4549

Yes i got the way,

unslider looking its li tag where it defines a vector for deceiding its width and height. something like below,

 <li>
                <img src="CMS/Files/slider_01.jpg" alt="" style="width: 105%; height: 980px;" />
                <div class="widthfix">
                    <div>
                        <a>
                            <h2>Huzurunuz icin koruyoruz..</h2>
                            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus libero quam, blandit sed hendrerit molestie, rhoncus in velit.</p>
                        </a>
                    </div>
                </div>
            </li>

if you use a tag without a new div it doesnt know where its position linking to the its image container or other elements. The main reason about is that i think prepared to all browser supporting for responsive design.

Upvotes: 0

Attila Fulop
Attila Fulop

Reputation: 7011

I had the same issue, and found more than one solutions:

  1. As @Shalini Subramani mentioned you can add height to the ul within the slider div:

CSS

.slider ul {
    height: 450px
}
  1. You can add a height attribute to the first image in the slider

HTML

<div class="slider">
    <ul>
        <li><img src="slider1.png" height="450" />
    </ul>
</div>
  1. You can also set min-height on the ul

CSS

.slider ul {
    min-height: 450px
}

The second one is a bit since it's using the height attribute, but it allows you to dynamically set the first banner's height from code. This can be useful in cases when you don't know in advance the height of the first slider, or if it changes often based on what the users upload.

Upvotes: 1

Shalini Subramani
Shalini Subramani

Reputation: 502

I am also face this issue. I have fixed to add "height" in the ul.

CSS
.hp_slideshow ul { height: px!important;}

Upvotes: 3

Related Questions