次のコードを使用して、JavaScript のスライド効果を持つ動的リストを生成します。
<head>
<script data-require="jquery@*" data-semver="2.1.1" src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
</head>
<body>
<div class="newsblock">
<ul id="newgall">
<?php
//display 10 posts with title and date
$args=array(
'post_type' => 'post',
'post_status' => 'publish',
'post_category' => '123',
'posts_per_page' => 12,
'caller_get_posts'=> 1
);
$my_query = null;
$my_query = new WP_Query($args);
if( $my_query->have_posts() ) {
while ($my_query->have_posts()) : $my_query->the_post();
?>
<li>
<p>
<a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link to <?php the_title_attribute(); ?>"><?php the_title(); ?></a>
<br/><?php the_time('F jS, g:i a') ?>
<br/>
</p>
</li>
<?php
endwhile;
}
wp_reset_query(); // Restore global post data stomped by the_post().
?>
</ul>
</div>
<script>
var $items = $('#newgall li'),
i = 0;
function slide() {
var index = i % $items.length;
$items.hide().removeClass('curr').slice(index, index +4).show('fade').addClass('curr');
i += 4;
setTimeout(slide, 400);
};
slide();
</script>
</body>
ここで、スライド効果を使用して、最近の投稿 12 件中 4 件を一度に表示し、合計 3 回の遷移を行いたいと考えています。通常の順序付けられていないリストでは、これはうまく機能します。WP_Query をリストとして使用すると、リストに複数のトランジションが入力されません。
12 件の投稿のうち 4 件しか表示されないのは、何が問題なのですか?
また、4 つのリスト項目の最初のセットをデフォルトにするにはどうすればよいですか。リストが表示される前にトランジション効果が発生するため、空白スペースが生じ、コンテンツが表示されます。リストを最新の 4 つの投稿から始めて、次の一連のコンテンツなどに移行したいと思います。