Размещение экрана загрузки Nivo-Slider

Question

В настоящее время на моем сайте работает Nivo-Slider. Он отлично работает после загрузки - но при загрузке он помещается в верхнюю левую часть экрана. После загрузки - он идет туда, куда я направил его, чтобы перейти в CSS. Я пытаюсь вычислить контейнер CSS для экрана загрузки, но я не уверен, с чего начать.

Изображение Загрузка проблемы: http://i46.tinypic.com/szdg7s.jpg

То, что я хотел бы функцию загрузки, чтобы посмотреть, как в моем макете: http://i50.tinypic.com/uyfyb.jpg

Мой Nivo Код в индексе:

<!--/ Run Nivo--> 
<script type="text/javascript"> 
$(window).load(function() { 
    $('#slider').nivoSlider({ 
     effect: 'fade', // Specify sets like: 'fold,fade,sliceDown' 
     slices: 15, // For slice animations 
     boxCols: 8, // For box animations 
     boxRows: 4, // For box animations 
     animSpeed: 500, // Slide transition speed 
     pauseTime: 3000, // How long each slide will show 
     startSlide: 0, // Set starting Slide (0 index) 
     directionNav: true, // Next & Prev navigation 
     directionNavHide: true, // Only show on hover 
     controlNav: true, // 1,2,3... navigation 
     controlNavThumbs: false, // Use thumbnails for Control Nav 
     controlNavThumbsFromRel: false, // Use image rel for thumbs 
     controlNavThumbsSearch: '.jpg', // Replace this with... 
     controlNavThumbsReplace: '_thumb.jpg', // ...this in thumb Image src 
     keyboardNav: true, // Use left & right arrows 
     pauseOnHover: true, // Stop animation while hovering 
     manualAdvance: false, // Force manual transitions 
     captionOpacity: 0.8, // Universal caption opacity 
     prevText: 'Prev', // Prev directionNav text 
     nextText: 'Next', // Next directionNav text 
     randomStart: false, // Start on a random slide 
     beforeChange: function(){}, // Triggers before a slide transition 
     afterChange: function(){}, // Triggers after a slide transition 
     slideshowEnd: function(){}, // Triggers after all slides have been shown 
     lastSlide: function(){}, // Triggers when last slide is shown 
     afterLoad: function(){} // Triggers when slider has loaded 
    }); 
}); 
</script> 


<script type="text/javascript"> 
$(window).load(function() { 
    $('#slider').nivoSlider(); 
}); 
</script> 




<!--/ Show Nivo--> 

<div class="slider-wrapper theme-default"> 
    <div class="ribbon"></div> 
    <div id="slider" class="nivoSlider"> 
    <img src="/dev/images/scs-logo.jpg" alt="" /> 
    <img src="/dev/images/signage.jpg" alt="" /> 
    <img src="/dev/images/wsop.jpg" alt="" /> 

</div> 

CSS Код, который помещает Nivo Slideshow после его загрузки:

/*Nivo-Slider Div*/ 

#slider { 
    position: absolute; 
    margin-left: auto; 
    margin-right: auto; 

} 

Answer 1

Убедитесь, что вы не добавляете #slider к .nivoSlider класса в CSS. Именно так я исправил проблему позиционирования, которую я имел. Я добавил #slider в класс .nivoSlider в CSS, и то, что он сделал, было нести мое скольжение в верхнюю левую часть экрана. : \

Answer 2

Попробуйте это:

#slider { margin:0 auto; float:left; width:100%; }