整个滑跳负载 - AnythingSlider

我使用AnythingSlider放置了一个新的网站在这个开发内容：整个滑跳负载 - AnythingSlider

http://sitedev.lcadfiles.com/interactive_barrett.html

当给定页面上的滑块首先加载，有轻微的跳跃（整个滑块，箭头等在移动到正确的位置之前移动几个像素）。登陆后，这一切似乎工作正常。这个转变看起来并不是特定于浏览器的，因为它出现在我的老旧机器上，有4种不同的浏览器（以及各种浏览器版本）。

有什么我设置错了吗？我认为它可能在全球的某个地方，比如anythingSlider.js（或者.css--尽管这似乎不太可能），但没有看到任何突出的东西。

来源

2012-06-19 Todd

确保没有对'ul'和'li'的设置任何填充或利润率 - 基本上确保重置你的CSS。 – Mottie

有同样的问题。一个快速的解决方法（适用于我）。

例如。你有像下面的html代码，添加一个style =“visibility：hidden;”到您的anythingslider容器。

<div id="slider_nest" style="visibility:hidden;"> 
    <ul id="your_anythingslider"> 
    ... 
    </ul> 
</div>

在js代码中，当文档准备好时将样式更改为可见。（jQuery）

jQuery(document).ready(function($) { 
    $('#slider_nest').css('visibility', 'visible'); 
    ... 
    $('#your_anythingslider').anythingslider(); 
    ... 
}

希望它有帮助！

更新：使用加载器gif添加滑块掩码。

例如。在HTML中，你将有类似如下：

<div id="slider_mask" style="background: #000 url('ajax-loader.gif') no-repeat center;  display:block; height:568px; width:1050px; margin:0 auto;"> 
</div> 
<div id="slider_nest" style="display:none; height:568px; width:1050px; margin:0 auto;"> 
    <ul id="your_anythingslider"> 
    ... 
    </ul> 
</div>

在js

现在（的JQuery）：

jQuery(document).ready(function($) { 
    $('#slider_mask').hide(); 
    $('#slider_nest').css({'display':'block'}); 
    ...

来源

2012-11-21 00:49:48 user1310312

您还可以使用显示属性来替换可见性。在加载大量幻灯片的情况下，您也可以使用loader.gif添加滑块蒙版，请参阅更新 – user1310312

OMG，这次终于解决了我们的问题！谢谢。

由于我使用的是自定义主题的WordPress插件，我不得不调整它有点像这样：

<div id="slider_mask" style="background: #FFF url('ajax-loader.gif') no-repeat center;display:block; height:323px; width:940px; margin:0 auto;"> 
</div>

：

在的header.php文件简码前添加此

在的header.php文件的部分补充一点：

<script type="text/javascript"> 
    $(document).ready(function(){ 
    $('#slider_mask').hide();   
    $('.anythingSlider').css({'display':'block'}); 
}

一下添加到CSS文件：

.anythingSlider {display:none;}

来源

2013-01-25 18:12:10 Anja

整个滑跳负载 - AnythingSlider

回答

相关问题