使用“上一步”和“下一步”按钮在查询旋转木马滑块上显示精选类别中的最后5篇帖子

时间:2014-08-10 作者:NewUser

我设法在测试站点上设置了一个查询转盘滑块。我如何调整滑块以显示我的特色帖子类别中的5篇最新帖子,而不是manuel编写的html部分?

Here is the fiddle

我已经找到了用以下代码显示特色帖子的代码-但我不知道如何将以下代码(或任何其他代码)实现到旋转木马滑块(请参见上面的小提琴)中,以便在每个框中显示每个特色帖子…:()

        <ul class="test">   
            <?php
            $default_thumbnail = \'http://.....d-slider.png\';
            $the_query = new WP_Query(\'showposts=5&orderby=desc&category_name=featured\');
            while ($the_query->have_posts()) : $the_query->the_post(); ?>
            <li>
            <a target="_blank" href="<?php the_permalink()?>" title="<?php the_title_attribute(); ?>">
                        <?php
                        if (has_post_thumbnail()):
                        the_post_thumbnail(\'default-thumbnail\');
                        else:
                        ?>
                        <img src="<?php echo $default_thumbnail; ?>" alt="<?php the_title(); ?>" />
                        <?php endif; ?>
            <h2><?php the_title(); ?></h2></a>          
            </li>           
            <?php endwhile; ?>
            <?php wp_reset_query(); ?>
        </ul>

2 个回复
最合适的回答,由SO网友:Nikolaos 整理而成

首先,我编辑了你的代码,删除了ul和li之间的缩略图,因为你不能在那里放置任何东西,而是将其放置在p标签中,用于演示目的,只有你可以将其更改为任何你喜欢的内容。我还添加了一个下一个和上一个按钮后的ul和一个div包含滑块。。。

<p><?php $default_thumbnail = \'http://.....d-slider.png\';</p>
<div class="slideshow-image-slider">
        <ul class="test">   
            $the_query = new WP_Query(\'showposts=5&orderby=desc&category_name=featured\');
            while ($the_query->have_posts()) : $the_query->the_post(); ?>
            <li>
            <a target="_blank" href="<?php the_permalink()?>" title="<?php the_title_attribute(); ?>">
                        <?php
                        if (has_post_thumbnail()):
                        the_post_thumbnail(\'default-thumbnail\');
                        else:
                        ?>
                        <img src="<?php echo $default_thumbnail; ?>" alt="<?php the_title(); ?>" />
                        <?php endif; ?>
            <h2><?php the_title(); ?></h2></a>          
            </li>           
            <?php endwhile; ?>
            <?php wp_reset_query(); ?>
        </ul>
        <p class="slider-control-prev"><a href="#">previous</a></p>
        <p class="slider-control-next"><a href="#">next</a></p>
</div>
您的Wordpress PHP现在是正确的,如果我理解正确,您正在尝试创建一个带有下一个和上一个按钮的自定义滑块,您可以在主题JS中使用以下jQuery。。。

var slideCount = $(\'.slideshow-image-slider ul li\').length;
var slideWidth = $(\'.slideshow-image-slider ul li\').width();
var slideHeight = $(\'.slideshow-image-slider ul li\').height();
var sliderUlWidth = slideCount * slideWidth;
$(\'.slideshow-image-slider\').css({ width: slideWidth, height: slideHeight });
$(\'.slideshow-image-slider ul\').css({ width: sliderUlWidth, marginLeft: - slideWidth });
$(\'.slideshow-image-slider ul li:last-child\').prependTo(\'.slideshow-image-slider ul\');
function moveLeft() {
    $(\'.slideshow-image-slider ul\').animate({
        left: + slideWidth
    }, 200, function () {
        $(\'.slideshow-image-slider ul li:last-child\').prependTo(\'.slideshow-image-slider ul\');
        $(\'.slideshow-image-slider ul\').css(\'left\', \'\');
    });
};
function moveRight() {
    $(\'.slideshow-image-slider ul\').animate({
        left: - slideWidth
    }, 200, function () {
        $(\'.slideshow-image-slider ul li:first-child\').appendTo(\'.slideshow-image-slider ul\');
        $(\'.slideshow-image-slider ul\').css(\'left\', \'\');
    });
};
$(\'.slider-control-prev a\').click(function () {
    moveLeft();
});
$(\'.slider-control-next a\').click(function () {
    moveRight();
});
基本上,上面的jQuery会自动添加额外的li,并为每张幻灯片添加上一页和下一页按钮,在每张幻灯片之间设置动画。

从逻辑上讲,如果我理解正确,以上应该可以做到:)让我知道你进展如何

SO网友:HML

也许您可以这样更改查询:

(\'showposts=5&orderby=post_date&order=desc&category_name=featured\');

结束

相关推荐