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=\"javascript:void(0);\">'+ options.firstText +'</a></span>';
> html += ' <span id="'+ options.prevId +'"><a
> href=\"javascript:void
> (0);\">'+ options.prevText +'</a></span>';
> html += ' <span id="'+ options.nextId +'"><a
> href=\"javascript:void
> (0);\">'+ options.nextText +'</a></span>';
> if(options.lastShow) html += ' <span id="'+
> options.lastId +'"><a
> href=\"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 },
> speed
> );
> } else {
> p = (t*h*-1);
> $("ul",obj).animate(
> { marginTop: p },
> speed
> );
> };
>
> if(!options.continuous &&
> options.controlsFade){
> if(t==ts){
>
> $("a","#"+options.nextId).hide();
>
> $("a","#"+options.lastId).hide();
> } else {
>
> $("a","#"+options.nextId).show();
>
> $("a","#"+options.lastId).show();
> };
> if(t==0){
>
> $("a","#"+options.prevId).hide();
>
> $("a","#"+options.firstId).hide();
> } else {
>
> $("a","#"+options.prevId).show();
>
> $("a","#"+options.firstId).show();
> };
> };
>
> if(clicked) clearTimeout(timeout);
> if(options.auto && dir=="next" && !clicked){;
> timeout = setTimeout(function(){
> animate("next",false);
> },diff*options.speed+options.pause);
> };
>
> };
> // init
> var timeout;
> if(options.auto){;
> timeout = setTimeout(function(){
> animate("next",false);
> },options.pause);
> };
>
> if(!options.continuous && options.controlsFade){
> $("a","#"+options.prevId).hide();
> $("a","#"+options.firstId).hide();
> };
>
> });
>
> };
>
> })(jQuery);
>
>
