you keep focusing effort on the DIV wrapping the slider, but the not the UL which is the first block level parent of the slider images. I'm not sure why overflow on div not working but I would attack the UL with float, height, overflow etc. With those huge images and therefore very slow load times whatever you do it will take a while for slider script to run on load.

Alan wrote:
Tried that...still same result.

On Jul 19, 7:47 pm, Glazz <brunofgas...@live.com.pt> wrote:
  
Hmm i tried to replicate that on my server but whithout success...

You can try what i've mentioned in my previous post, display: none;
like this:

HTML:
<div id="slider" align="center" style="display: none;">

JS:
Add this
     $('#slider').css({'display' : 'block'});

After
     this.each(function() {

It will look like this:

this.each(function() {
      $('#slider').css({'display' : 'block'});

Try it please...

On 20 Jul, 02:25, Alan <alanblackf...@gmail.com> wrote:



    
I can show css or slider code if it helps.
      
Slider CSS below
------------------------------
@charset "utf-8";
/* CSS Document */
        #slidercontent{
                position:relative;
                }
#slidercontainer{
                margin:0 auto;
                position:relative;
                text-align:left;
                width:896px;
                background:#fff;
                margin-bottom:2em;
                }
      
  /* clearfix */
      
                #slidercontent:after, ul:after{
                        content:".";
                        display:block;
                        height:0;
                        clear:both;
                        visibility:hidden;
                        }
                #slidercontent, ul{
                        display:block;
                        }
                /*  \*/
                #slidercontent, ul{
                        min-height:1%;
                        }
                * html #slidercontent, * html ul{
                        height:1%;
                        }
      
    /* // clearfix */
      
   /* image replacement */
        .graphic, #header h1, #prevBtn, #nextBtn{
            margin:0;
            padding:0;
            display:block;
            overflow:hidden;
            text-indent:-8000px;
            }
    /* // image replacement */
      
/* Easy Slider */
      
        #slider{}
        #slider ul, #slider li{
                margin:0;
                padding:0;
                list-style:none;
                }
        #slider li{
                /*
                        define width and height of list item (slide)
                        entire slider area will adjust according to the parameters provided
here
                */
                width:896px;
                height:171px;
                overflow:hidden;
                }
        #prevBtn, #nextBtn{
                display:block;
                width:30px;
                height:77px;
                position:absolute;
                left:-30px;
                top:41px;
                }
        #nextBtn{
                left:896px;
                }
        #prevBtn a, #nextBtn a{
                display:block;
                width:30px;
                height:77px;
                background:url(/includes/sliders/images/btn_prev.gif) no-repeat 0
0;
                }
        #nextBtn a{
                background:url(/includes/sliders/images/btn_next.gif) no-repeat 0
0;
                }
      
/* // Easy Slider */
      
Actual Slider Code
---------------------------------
(function($) {
      
        $.fn.easySlider = function(options){
      
                // default configuration properties
                var defaults = {
                        prevId:                 'prevBtn',
                        prevText:               '',
                        nextId:                 'nextBtn',
                        nextText:               '',
                        controlsShow:   true,
                        controlsBefore: '',
                        controlsAfter:  '',
                        controlsFade:   true,
                        firstId:                'firstBtn',
                        firstText:              'First',
                        firstShow:              false,
                        lastId:                 'lastBtn',
                        lastText:               'Last',
                        lastShow:               false,
                        vertical:               false,
                        speed:                  800,
                        auto:                   false,
                        pause:                  4000,
                        continuous:             false
                };
      
                var options = $.extend(defaults, options);
      
                this.each(function() {
                        var obj = $(this);
                        var s = $("li", obj).length;
                        var w = $("li", obj).width();
                        var h = $("li", obj).height();
                        obj.width(w);
                        obj.height(h);
                        obj.css("overflow","hidden");
                        var ts = s-1;
                        var t = 0;
                        $("ul", obj).css('width',s*w);
                        if(!options.vertical) $("li", obj).css('float','left');
      
                        if(options.controlsShow){
                                var html = options.controlsBefore;
                                if(options.firstShow) html += '<span id="'+ options.firstId +'"><a
href="" class="moz-txt-link-rfc2396E" href="_javascript_:void(0);\">"_javascript_:void(0);\">'+ options.firstText +'</a></span>';
                                html += ' <span id="'+ options.prevId +'"><a href="" class="moz-txt-link-rfc2396E" href="_javascript_:void(0);\">"_javascript_:void
(0);\">'+ options.prevText +'</a></span>';
                                html += ' <span id="'+ options.nextId +'"><a href="" class="moz-txt-link-rfc2396E" href="_javascript_:void(0);\">"_javascript_:void
(0);\">'+ options.nextText +'</a></span>';
                                if(options.lastShow) html += ' <span id="'+ options.lastId +'"><a
href="" class="moz-txt-link-rfc2396E" href="_javascript_:void(0);\">"_javascript_:void(0);\">'+ options.lastText +'</a></span>';
                                html += options.controlsAfter;
                                $(obj).after(html);
                        };
      
                        $("a","#"+options.nextId).click(function(){
                                animate("next",true);
                        });
                        $("a","#"+options.prevId).click(function(){
                                animate("prev",true);
                        });
                        $("a","#"+options.firstId).click(function(){
                                animate("first",true);
                        });
                        $("a","#"+options.lastId).click(function(){
                                animate("last",true);
                        });
      
                        function animate(dir,clicked){
                                var ot = t;
                                switch(dir){
                                        case "next":
                                                t = (ot>=ts) ? (options.continuous ? 0 : ts) : t+1;
                                                break;
                                        case "prev":
                                                t = (t<=0) ? (options.continuous ? ts : 0) : t-1;
                                                break;
                                        case "first":
                                                t = 0;
                                                break;
                                        case "last":
                                                t = ts;
                                                break;
                                        default:
                                                break;
                                };
      
                                var diff = Math.abs(ot-t);
                                var speed = diff*options.speed;
                                if(!options.vertical) {
                                        p = (t*w*-1);
                                        $("ul",obj).animate(
                                                { marginLeft: p },
                         
      
...

read more »- Hide quoted text -

- Show quoted text -

Reply via email to