jquery プラグイン stepcarousel.js でコンテンツ部分のスライドを実装する覚書。
jquery とstepcarousel.js を読み込み、↓のように、クラスpanel をループの間に入れる。
<script type="text/javascript">
stepcarousel.setup({
galleryid: 'mygallery', //id of carousel DIV
beltclass: 'belt', //class of inner "belt" DIV containing all the panel DIVs
panelclass: 'panel', //class of panel DIVs each holding content
autostep: {enable:true, moveby:1, pause:3000},
panelbehavior: {speed:500, wraparound:true, persist:true},
defaultbuttons: {enable: true, moveby: 1, leftnav: ['left.jpg', -25, 120], rightnav: ['right.jpg', -75, 120]},
statusvars: ['statusA', 'statusB', 'statusC'], //register 3 variables that contain current panel (start), current panel (last), and total panels
contenttype: ['external'] //content setting ['inline'] or ['ajax', 'path_to_external_file']
})
</script>
<div id="slider">
<div id="mygallery" class="stepcarousel">
<div class="belt">
<?php if (have_posts()) : query_posts('posts_per_page=12&cat=9'); ?>
<?php while (have_posts()) : the_post(); ?>
<div class="panel">
～
</div>
<?php endwhile; endif; ?>
<?php wp_reset_query(); ?>
</div>
</div>
ワードプレスのプラグインWP Featured Content Slider でも実装できるが、オートスタートはなし。リセットを加えたほうが良い。
WP Featured Content Slider では表示する画像はURLをカスタムフィールドにペーストするようになっている。
2010.06.21 投稿 2015.04.05 更新
新しい情報を追記している場合はありますが、古い情報の修正はしていません。投稿日・文中の日付を参照してください。