创建WordPress帖子滑块时出现问题

时间:2015-08-10 作者:Carl Willis

首先,我知道我必须添加一些代码来解释我之前所做的工作。

但老实说,我已经尝试了十多个关于基于flexslider或bxslider或jquery的其他trics的wordpress post slider的教程,但说真的,伙计们,我不知道问题出在哪里,我不能显示slider我显示的最好的东西是一个垂直的post图像和内容列表。

所以我的问题是如何创建wordpress帖子滑块?

另外,我有一些链接jquery,这些文件可能会中断滑块。邮递

2 个回复
SO网友:Brick Yang

我认为问题是你不知道如何使用你选择的滑块插件。事实上,如果您了解JavaScript,就可以制作一个没有jQuery的简单滑块。

要创建post滑块,步骤如下:

1: 通过WordPress函数创建帖子列表。使用<ul> 要包装列表并使用的标签<li> 标签包装每篇文章:

<div class="sliderContainer">
    <ul class="slider">
        <li class="sliderItem"><article>/* post content */</article></li>
        <li class="sliderItem"><article>/* post content */</article></li>
        <li class="sliderItem"><article>/* post content */</article></li>
    </ul>
</div>
2:按CSS设置样式,如下所示:

.sliderContainer{position:relative;overflow:hidden;}
.slider{position:absolute;top:0;left:0;}
.sliderItem{float:left;line-height:0;font-size:0;*zoom:1;}
.sliderItem:after{display:table;content:\'\';clear:both;}
您还应该设置widthheight 容器的。现在,您应该得到一个水平的帖子列表,并且只显示第一篇帖子(其他帖子溢出并隐藏)。

3: 现在使用JavaScript移动.slider 哪个是<ul> 标签原则是参见<ul> 作为皮带并移动它width 一次一次的距离。

如果您不需要考虑IE9,那么使用CSS3transitiontransform:translateX 制作动画。使用JavaScript添加或删除transitiontransform 风格

您仍然需要做一些详细的工作,以使JavsScript部分更加实用,但这是一个良好的开端。

SO网友:Carl Willis

谢谢你的回答,是的,我在javascript方面没有很好的水平,但我已经创建了与你所说的相同的东西,并且它工作了,但它需要动画,所以我尝试基于flex slider,但没有任何成功。这是我的代码,我知道这段代码是用于附件的,但我没有显示任何内容。

function revconcept_get_images($post_id) {
global $post;

 $thumbnail_ID = get_post_thumbnail_id();

 $images = get_children( array(\'post_parent\' => $post_id, \'post_status\' => \'inherit\', \'post_type\' => \'attachment\', \'post_mime_type\' => \'image\', \'order\' => \'ASC\', \'orderby\' => \'menu_order ID\') );

 if ($images) :

     foreach ($images as $attachment_id => $image) :

         $img_alt = get_post_meta($attachment_id, \'_wp_attachment_image_alt\', true); //alt
         if ($img_alt == \'\') : $img_alt = $image->post_title; endif;

         $big_array = image_downsize( $image->ID, \'large\' );
         $img_url = $big_array[0];

         echo \'<li>\';
         echo \'<img src="\';
         echo $img_url;
         echo \'" alt="\';
         echo $img_alt;
         echo \'" />\';
         echo \'</li><!--end slide-->\';

 endforeach; endif; }
我在函数中添加了这个函数。php和标题中的这个

<link rel="stylesheet" href="<?php echo get_template_directory_uri(); ?>/js/flexslider.css" type="text/css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<script src="<?php echo get_template_directory_uri(); ?>/js/jquery.flexslider.js"></script>
然后我将附件显示为单体。php由这一个。

<div class="flexslider">
<ul class="slides">
    <?php revconcept_get_images("$post->ID"); ?>
</ul>

结束

相关推荐

structure of posts and pages

我有wordpress网站,有一些静态页面和帖子。我想显示页面URL,如下所示:mywebsite.com/PageName1 mywebsite.com/PageName2 ... 我还有一些文章,将在下一步中更多,我希望的PostURL结构是:mywebsite.com/blog/PostName1 mywebsite.com/blog/PostName2 ... 我应该说,我用“博客”这个名字做了一个分类,我所有的网站帖子都在这个分类中。提前谢谢