滑块渲染加载正确

如果你在我的网址看看下面，并且连接上可能不是真正的快速前每张幻灯片。您会注意到顶部的滑块，在垂直列表中加载每个单独的幻灯片（占用大约1000px的空间），然后按照它应该渲染的方式 - 这就像一个标准滑块;一次显示并滑动一张幻灯片。滑块渲染加载正确

有没有人有任何建议，如何让我的滑块正确加载？

在直播现场>>http://tinyurl.com/cz6sawg

---感谢您的指点，我想我需要找到一个脚本，允许滑动到被隐藏，直到滑块/页面呈现在他们面前完全加载。

相关的jQuery：

<script type="text/javascript"> 

jQuery(document).ready(function($){ 
    $("#photo-rotator").tabs({fx:{opacity: "toggle"}}).tabs("rotate", 6000); 
}); 

</script>

相关加价：

<!-- Top of Page Slider FRAGILE --> 

<div style="min-height: 280px;"> 

<div id="photo-rotator" style=""> 
<?php $slide_id=1; ?> 
<?php 
$featuredPosts = new WP_Query(); 
$featuredPosts->query("showposts=3"); 
while ($featuredPosts->have_posts()) : $featuredPosts->the_post(); 
?> 

    <div id="slide-<?php echo $slide_id; $slide_id++;?>"> 
    <a href="<?php the_permalink() ?>" class="post-image"> 
     <?php the_post_thumbnail('rotator-post-image'); ?> 
     <span class="title" style="font-style:italic; color:#999;"><?php the_title(); ?></span> 
    </a> 
    </div> 

    <?php endwhile; ?><!--/close loop--> 

    <ul id="slide-nav"> 
     <?php $nav_id=1; ?> 
     <?php while ($featuredPosts->have_posts()) : $featuredPosts->the_post(); ?> 
      <li> 
       <a href="#slide-<?php echo $nav_id; ?>"> 
        <span class="thumbnail" style="display:none;"> 
        </span> 
        <p style="color:#F93; font-family:Georgia, 'Times New Roman', Times, serif; font-size: 18px;"><? the_title(); $nav_id++;?></p> 

        <div style=""> 

        <!--<?php the_excerpt(); ?>--> 

        <?php if($text= get_post_meta($post->ID, "slidetext", true)) { ?> 
         <div class=""> 

         <p style="font-weight: normal; color: #333; font-family: Arial, Helvetica, sans-serif; font-size: 14px;"><?php echo $text; ?></p> 

         </div> 
         <?php } //else { print"<div>"; } ?> 

        </div> 

       </a> 
      </li> 
     <?php endwhile; ?><!--/close loop--> 
     </ul> 
     </div> 

</div>   

<!-- End Top page Slider FRAGILE -->

来源

2012-05-15 Fred Randall

那么你的jQuery的样子。你在加载页面后调用滑块吗？ – Brian

刚刚添加了上面的相关jQuery。我认为这意味着/在页面加载，对不对？ –

你需要添加相关的HTML或者只是jsFiddle它。 – iambriansreed

你的代码是有点乱，问题没有帮助，但在与你的问题部分的关系如下：

ou'd注意顶部的滑块，卡入它应该呈现

您可以包裹的方式加载之前在垂直列表（以约1000像素的空间），每张幻灯片整个滑内容有一个div，并给overflow:hidden;防止+/- 1000像素的高度上的页面加载：

CSS

#photo-rotatorWrapper { 
    width: 960px; 
    height: 400px; 
    margin: 0 auto; 
    overflow: hidden; 
}

HTML

<div id="photo-rotatorWrapper"> 
    <div id="photo-rotator"> 
    ... 
    </div> 
</div>

注：您可根据需要设置其他CSS声明为包装，以保持当前的HTML结构中的正确定位。

来源

2012-05-15 19:53:46 Zuul

谢谢，是的 - 这正是我一直在尝试的解决方案。我试着在所有的标记中添加一个包装，我尝试过，使用已经编码过的div容器，并且试过用定义高度和宽度的div来包围我的PHP包含的滑块 - 它会将滑块方式推到我的页面内容的下面和后面，并且我还没有找到解决方案来将它保存在正常位置。 –

我已经设法使用这个概念和边缘滑块它应该是。尽管如此，它的负载仍然很奇怪 - 这将是解决方案，因为我没有更多的时间去追求。 Muchas Gracias。 –

滑块渲染加载正确

回答

相关问题