CODEWITHSUNDEEP
jqueryslider
Khirthan
Khirthan

Reputation: 197

Revolution slider images loads first and then only slider comes

Iam creating a site with Revolution slider, but the images of the slider loads first and after everything loads, then only slider works..

Before the slider loads, its looks ugly to see all the images at a glance...

I have already tried with mulitple css changes, but nothing worked..

http://livedesignstudios.com/glor-original/

<div class="fullwidthbanner-container">
                    <div class="fullwidthbanner">
                        <ul>
                            <!-- THE FIRST SLIDE -->
                            <li data-transition="fade" data-slotamount="1" data-masterspeed="500" data-thumb="images/thumbs/thumb3.jpg">
                                        <img alt="glow" title="designova" src="images/slides/slide5_wide.jpg" >

                                        <div class="caption modern_big_bluebg lfb"  
                                             data-x="380" 
                                             data-y="60" 
                                             data-speed="500" 
                                             data-start="1500" 
                                             data-easing="easeOutExpo">The Pocket Computer</div>
                                        <div class="caption modern_small_text_dark sfb"  
                                             data-x="420" 
                                             data-y="110" 
                                             data-speed="500" 
                                             data-start="1800" 
                                             data-easing="easeOutExpo">USB OS made for Children but <br>Good enough for Military</div>
                                        <div class="caption lfl"  
                                            data-x="480" 
                                            data-y="170" 
                                            data-speed="500" 
                                            data-start="2100" 
                                            data-easing="easeOutExpo" ><img alt="downloadfree" title="downloadfree" src="images/slides/downloadfree.png"></div>         

</div>              
                            </li>

Upvotes: 0

Views: 4349

Answers (3)

user3515900
user3515900

Reputation: 29

I managed to fix this issue by setting opacity: 0; using inline style on the first image.

Upvotes: 1

Arleigh Robert Renard Dickerso
Arleigh Robert Renard Dickerso

Reputation: 11

It looks like you closed your div before you closed your li. 

    <div class="fullwidthbanner">
        <ul>
            <!-- THE FIRST SLIDE -->
            <li data-transition="fade" data-slotamount="1" data-masterspeed="500" data-thumb="images/thumbs/thumb3.jpg"><img alt="glow" title="designova" src="images/slides/slide5_wide.jpg">

                <div class="caption modern_big_bluebg lfb" data-x="380" data-y="60" data-speed="500" data-start="1500" data-easing="easeOutExpo">The Pocket Computer</div>
                <div class="caption modern_small_text_dark sfb" data-x="420" data-y="110" data-speed="500" data-start="1800" data-easing="easeOutExpo">
                    USB OS made for Children but <br>Good enough for Military
                </div>
                <div class="caption lfl" data-x="480" data-y="170" data-speed="500" data-start="2100" data-easing="easeOutExpo">
                    <img alt="downloadfree" title="downloadfree" src="images/slides/downloadfree.png">
                </div>
            </li>
        </ul>
    </div>

Also, try changing the order in which you load your scripts. I had a similar problem due to loading a bunch of other scripts before I loaded the revolution-slider javascript.

Upvotes: 0

ZAUR
ZAUR

Reputation: 1

$(".fullwidthbanner").hide();
$(".fullwidthbanner").delay(100).fadeIn(0);

Upvotes: 0

Related Questions