This show 3 image at a time and move left 3 images at a time this is my problem. I want that show 3 images at a time and move left only one at a time. For Example, 4 image add it and three show at a time and when move one image then also show three image at a time. And then move one and than also show three images like http://wmh.github.io/jquery-scrollbox/ Example No 5 and 6…*
Note: $Cat_ID is categories..
<div class="cat-box-content">
<?php if($cat_query->have_posts()): ?>
<div id="slideshow<?php echo $Cat_ID ?>" class="group_items-box">
<?php while ( $cat_query->have_posts() ) : $cat_query->the_post()?>
<div <?php tie_post_class('scroll-item'); ?>>
<?php if ( function_exists("has_post_thumbnail") && has_post_thumbnail() ) : ?>
<div class="post-thumbnail">
<a href="<?php the_permalink(); ?>" title="<?php printf( esc_attr__( 'Permalink to %s', 'tie' ), the_title_attribute( 'echo=0' ) ); ?>" rel="bookmark">
<?php //the_post_thumbnail( 'thumbnail' ); ?>
<?php tie_thumb( 'tie-large' ); ?>
<span class="overlay-icon"></span>
</a>
</div><!-- post-thumbnail /-->
<?php endif; ?>
<h3 class="post-box-title"><a href="<?php the_permalink(); ?>" title="<?php printf( esc_attr__( 'Permalink to %s', 'tie' ), the_title_attribute( 'echo=0' ) ); ?>" rel="bookmark"><?php the_title(); ?></a></h3>
<p class="post-meta">
<?php if( tie_get_option( 'box_meta_score' ) ) tie_get_score(); ?>
<?php if( tie_get_option( 'box_meta_date' ) ) tie_get_time() ?>
</p>
</div>
<?php endwhile;?>
<div class="clear"></div>
</div>
<div id="nav<?php echo $Cat_ID ?>" class="scroll-nav"></div>
<?php endif; ?>
</div>
JQuery Function :
<script type="text/javascript">
jQuery(document).ready(function() {
var vids = jQuery("#slideshow<?php echo $Cat_ID ?> .scroll-item");
for(var i = 0; i < vids.length; i+=3) {
vids.slice(i, i+3).wrapAll('<div class="group_items"></div>');
}
jQuery(function() {
jQuery('#slideshow<?php echo $Cat_ID ?>').cycle({
fx: 'scrollHorz',
timeout: 3000,
pager: '#nav<?php echo $Cat_ID ?>',
slideExpr: '.group_items',
speed: 1000,
pause: true
});
});
});
</script>