使用水平滚动显示 Wordpress 帖子缩略图

Question

亲爱的 StackOverflow，我在显示 wordpress 帖子缩略图时遇到了一些问题，如下图所示。我创建了一个单页模板，该模板对我想要显示的每种帖子类型都有查询，但我希望其中一个水平显示更多/更少按钮，具体取决于剩余的数量。我想我需要把这些放在单独的 div 中，然后用 Jquery 来滚动 div，但我很迷茫。下面的图片应该能更好地解释它。

显然，在需要滚动并替换当前图像之前，右侧的部分将被隐藏。

我对所有显示/替换视图的建议持开放态度，但一次只能提供一组项目……目前，7 个。

以下是目前为止的相关部分代码，虽然不正确，但我现在已经尽可能接近了。

    <section id="releases" class="content" >
  <?php 
  $args = array(
    'post_type' => 'releases',
    'post_status' => 'publish'
  );
  $query = new WP_Query($args);

  //
  $first = 7;
  $next = 6;
  ?>

  <?php if($query->have_posts()): ?>
    <div class="slide">
    <?php while($query->have_posts()) : $query->the_post(); ?>
      <div class="release col-3 left">
      <?php the_post_thumbnail(); ?>
      </div>
      <?php $current_position = $query->current_post + 1; ?>
      <?php if ($current_position < $query->found_posts && $current_position % $first == 0) : ?>
    <!-- -->
      <div class="release col-3 left">
        SHOWMORE</div>
      <div class="clear"></div>
      </div><div class="slide">

      <?php endif; ?>
    <?php endwhile; ?>
    </div>
  <?php endif; ?>
</section>

感谢您给我的任何帮助。

Answer 1

HTML 是这里的主要部分。我将无法编写代码，因为您必须检查许多条件。但是如果你需要一个psedu代码，你必须这样做。

1. 获取并统计所有帖子。
2. 如果计数小于 7，则只生成一个 div。无需滚动。但如果它大于 7 且小于 13，则生成 2 个 div，依此类推。

3. 所以html应该是这样的。

   <div class="wrapper">
       <div class="slide">
          <ul>
             <li>Post 1</li>
             <li>Post 2</li>
             <li>Post 3</li>
             <li>Post 4</li>
             <li>Post 5</li>
             <li>Post 6</li>
             <li>Post 7</li>
             <li class="next">Next</li>
          </ul>
       </div>
       <div class="slide hidden">
          <ul>
             <li>Post 8</li>
             <li>Post 9</li>
             <li>Post 10</li>
             <li>Post 11</li>
             <li>Post 12</li>
             <li>Post 13</li>
             <li class="next">Next</li>
          </ul>
       </div>
   </div>
   

   .slide{display:inline;width:960px;}
   .slide ul li{display:inline;list-style-type:none;}
   .hidden{display:none;}
   

4. 现在在 jquery 中你所要做的就是

   jQuery(文档).ready(函数($){ $('.slide').click(function(){ $(this).hide("slide", { direction: "right" }, 1000); $(this).next().show("slide", { direction: "left" }, 1000); }); });

Answer 2

我已经设法解决了这个问题，可以与其他人分享...您可以更改滑动动作以满足您的要求，但至少您不必在互联网上搜索您需要的内容。

帖子缩略图的 Wordpress 代码是：

jQuery(document).ready(function($) {

  // Show the next slide after clicking the "next" button/link.
  $('.next').click(function() {
    $(this).parent().parent().hide("slow");
    $(this).parent().parent().next('.slide').show("slow");
  });
});

.col-3 {
  width: 25%;
}
#slider {
  overflow: hidden;
  white-space: nowrap;
}
.slide {
  display: inline-block;
  max-width: 960px;
}
.slide ul li {
  display: inline;
  list-style-type: none;
}
.hidden {
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

  <section id="releases" class="content" >
    <?php 
    $args = array(
      'post_type' => 'releases',
      'posts_per_page' => -1,
    );
    $query = new WP_Query($args);

    echo '<div id="slider">';
    for($i=1; $query->have_posts(); $i++)
    {
      $query->the_post();
      $prePost='';
      $postPost='';

      if($i==1)
      {
        $prePost='<div class="slide"><ul>';
      }
      if($i==7)
      {
        $postPost='<li class="release col-3 left next">SEE MORE</li></ul></div>';
        // $i=0;
      }
      if($i==8)
      {
        $prePost='<div class="slide hidden"><ul>';
      }
      if($i==14)
      {
        $postPost='<li class="release col-3 left next">SEE MORE</li></ul></div>';
        $i=7;
      }

      echo $prePost, '<li class="release col-3 left"><div class="inner">';
      the_post_thumbnail();
      echo '</div></li>', $postPost;
    }
    echo '</div>';
    ?>
  </section>

这是从我的现场环境中截取的，但在早上 6 点我可能会有点不对劲。

我很乐意帮助遇到此问题的任何人使其正常工作，我知道这会带来多大的疼痛。