Wrap every 3 divs in a divs

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>