[Theme: Sight] Slideshow Hack

I’m using the sight theme from wp-showers. Very cool and clean theme. Their slideshow is also very simple but I’d like to change the way it works.

The idea looks just like https://okayplayer.com/ ‘s slideshow. I want to somehow have five of the featured images side by side while the post meta and excerpt sits in a box under these five photos and slides while an arrow indicates the referenced photo post.

I really want to do this but I just don’t know how to start. Say I want to first call the most recent five featured images (that have been checked for the slideshow option) and place them side by side, what would I need to do with the php first? here is the code to slideshow:

<?php
    $args = array(
        'meta_key' => 'sgt_slide',
        'meta_value' => 'on',
        'numberposts' => -1,
        );
    $slides = get_posts($args);

    if ( !empty($slides) ) : $exl_posts = Array(); ?>

        <div class="slideshow"><div id="slideshow">

        <?php foreach( $slides as $post ) :
            setup_postdata($post);
            global $exl_posts;
            $exl_posts[] = $post->ID;
        ?>
        <div class="slide clear">
            <div class="post">
                <?php if ( has_post_thumbnail() ) echo '<a href="'.get_permalink().'">'.get_the_post_thumbnail($post->ID, 'slide',
                    array(
                        'alt'	=> trim(strip_tags( $post->post_title )),
                        'title'	=> trim(strip_tags( $post->post_title )),
                    )).'</a>'; ?>
                <div class="post-category"><?php the_category(' / '); ?></div>
                <h2><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h2>

                <div class="post-meta">by <span class="post-author"><a href="<?php echo get_author_posts_url( get_the_author_meta( 'ID' ) ); ?>" title="Posts by <?php the_author(); ?>"><?php the_author(); ?></a></span> on <span
                        class="post-date"><?php the_time(__('M j, Y')) ?></span> ? <?php comments_popup_link(__('No Comments'), __('1 Comment'), __('% Comments'), '', __('Comments Closed') ); ?> <?php edit_post_link( __( 'Edit entry'), '? '); ?></div>
                <div class="post-content"><?php if ( has_post_thumbnail() && function_exists('smart_excerpt') ) smart_excerpt(get_the_excerpt(), 50); else smart_excerpt(get_the_excerpt(), 150); ?></div>
            </div>
        </div>
        <?php endforeach; ?>

        </div>

            <a href="javascript: void(0);" id="larr"></a>
            <a href="javascript: void(0);" id="rarr"></a>
        </div>
    <?php endif; ?>

and how would I change the css

[ Moderator note: Code fixed, the backticks need to go above and below the code to display correctly. ]

#slideshow, .slideshow {height: 200px; width:1050 px; overflow: hidden; position: relative; margin-top: 0px; margin-bottom: 15px;}
.slide {height: 200; width: 1050px; background: #DFC874;}
.slide img {display: block; float: left; width: 400px; height: 250px; position: relative; top: -20px; left: -30px;}
.slide .post {padding: 20px 30px 0;}
.slide .post-category {font-size: 11px; color: #000; text-transform: uppercase; margin-bottom: 5px;}
.slide .post a {color: #000;}
.slide .post .post-category a {text-decoration: none;}
.slide .post .post-category a:hover {text-decoration: underline;}
.slide .post h2 {margin-bottom: 5px;}
.slide .post h2, .slide .post h2 a {color: #000; font-size: 20px; font-weight: 700; text-decoration: none; font-family: 'PT Sans', sans-serif;}
.slide .post h2 a:hover {text-decoration: underline;}
.slide .post .post-meta {font-size: 11px; font-style: italic; color: #000; margin-bottom: 10px;}
.slide .post .post-meta span, .slide .post .post-meta a {color: #000; text-decoration: none; font-family: Helvetica, Arial, sans-serif; font-style: normal;}
.slide .post .post-meta a:hover {text-decoration: underline;}
.slide .post .post-author {text-transform: uppercase;}
.slide .post-content p {margin-bottom: 15px;}
#larr, #rarr {display: block; width: 50px; height: 50px; position: absolute; top: 80px !important; opacity: 0.2; z-index: 99 !important;}
#larr {background: transparent url("images/infins.png") 8px 50% no-repeat; left: 0 !important;}
#rarr {background: transparent url("images/infins.png") 8px 50% no-repeat; right: 0 !important;}
#larr:hover, #rarr:hover {opacity: 1;}

If I can get started here, I can try to find my way around the rest. If anyone has any suggestions, I’d really appreciate it.

Thanks in advance