Question

我想在Wordpress blog（德语）上的所有博客帖子中显示一个水平滑块，类似于The Verge上的“产品”滑块（在主页的一半）。我的博客基于论文主题。

对于每篇文章，我将帖子的缩略图和短标题定义为自定义字段。

我找到了各种插件，例如“WP精选内容滑块”或“WP Coda滑块”，但它们都没有接近我正在寻找的滑块。看起来很有前途的东西是“移动盒子”jQuery滑块，但由于我对jQuery（和Javascript）的了解有限，我没有设法使它工作。

有谁知道如何制作这样的滑块？还是有可用的插件或工具，我还没有遇到过？

感谢任何帮助！

Answer 1

菲利普我可以帮助你。

您需要创建两个循环，一个用于处理sliderview的主要内容，另一个用于填充缩略图以对应相关帖子。

这个例子很宽松，但你可以在网上找到更好的例子 - 请注意，你将要使用$wp_query功能，这样你就可以获得更准确的帖子列表

我强烈建议您使用jQuery Cycle

<!-- loop for slider -->
<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>

<div id="slider">
<!-- format your posts-->
<?php endwhile; else: ?>
<p><?php _e('Sorry, no posts matched your criteria.'); ?></p>
<?php endif; ?>
</div>

<!-- loop for thumbnails -->

<div class="nav">
<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>

<!-- format your thumbnails -->

<?php endwhile; else: ?>
<p><?php _e('Sorry, no posts matched your criteria.'); ?></p>
<?php endif; ?>
</div>


// then call your slideshow

$('#slider').after('<ul id="nav">').cycle({ 
    fx:     'scrollHorz', 
    speed:  'fast', 
    timeout: 0, 
    pager:  '#nav', 

    // callback fn that creates a thumbnail to use as pager anchor 
    pagerAnchorBuilder: function(idx, slide) { 
        return '<li><a href="#"><img src="' + slide.src + '" width="50" height="50" /></a></li>'; 
    } 
});

如何为我的Wordpress博客创建帖子滑块，如theverge.com上的产品滑块

1 个答案: