[JavaScript][HTML][CSS] Slider Opcje

[atom90]

Witam

Potrzebuje przygotować:
(IMG:http://i982.photobucket.com/albums/ae307/okruszek90/Zrzut%20ekranu%202016-02-22%20o%2011.23.08_zpszms0hbfv.png)

Jest to sekcja dla dwoch osob i ich opisów, przypomina w pewien sposób slider

aktualnie mam to tragicznie zrobione z faktu na brak czasu, zrobilem totalnie prowizoryczna funkcjonalnosc. polegajaca ze po kliknieciu szarego obrazka zmienia zostaje ukryty duzy i maly a zaladowany zostaje druga osoba (odkryta)
skrypt js (tragiczny)

Kod

function slider(){
    $('.kasia_s').bind('click', function(event){
        event.preventDefault();
        $('.kasia_l').fadeIn();
        $('.ryszard_l').hide();
        $('.kasia_s').hide();
        $('.ryszard_s').fadeIn();
        $('#kasia').fadeIn();
        $('#ryszard').hide();
    });
    $('.ryszard_s').bind('click', function(event){
        event.preventDefault();
        $('.ryszard_l').fadeIn();
        $('.kasia_l').hide();
        $('.kasia_s').fadeIn();
        $('.ryszard_s').hide();
        $('#ryszard').fadeIn();
        $('#kasia').hide();
    });
}

kod sekcji:

Kod

$team = new WP_query(
        array(
            'post_type'      => 'team',
            'order'          => 'ASC',
            'orderby'        => 'menu_order',
            'posts_per_page' => -1
            
        )
    );

    $i = 1;
    $photo_array = array();

?>
    
    <?php if ($team->have_posts()) : ?>
    
        <?php while ($team->have_posts()) : $team->the_post() ?>
        <?php    $photo_array[$i] = wp_get_attachment_url( get_post_thumbnail_id($post->ID) );;
                            $i++; ?>
                            <?php endwhile; ?>
    <?php endif; ?>
    
    <div class="row">

                            <div class="col-xs-12 col-sm-7 ">
                                <div class="slider">
                                    <div class="large">
                                        
                                        <img  class="kasia_l img-responsive" src="<?php print_r($photo_array[1]);?>" />
                                        <img class="ryszard_l img-responsive" src="<?php print_r($photo_array[2]);?>" />
                                        <div class="small">
                                            <img class="ryszard_s img_small img-responsive" src="<?php print_r($photo_array[2]);?>" />
                                            <img  class="kasia_s img_small img-responsive" src="<?php print_r($photo_array[1]);?>" />
                                        </div>
                                    </div>

                                </div>
                            </div>

                            <div class="col-xs-12 col-sm-5">
                                <?php if ($team->have_posts()) : ?>
    
        <?php while ($team->have_posts()) : $team->the_post() ?>
        
            <?php $ID = get_post_meta(get_the_ID(), '_id_name', true)?>
                                <div id="<?php echo $ID ?>">
                                    <div class="title">
                                        <h3><?php the_title() ?> <span>CEO</span></h3>
                                        <?php $position = get_post_meta(get_the_ID(), '_position_name', true)?>
                                        <span><?php echo $position ?></span>
                                    </div>
                                    <p>
                                
                                        <?php the_content() ?>
                                        
                                    </p>
                                </div>
<?php endwhile; ?>
    <?php endif; ?>

    
                            
                            </div>
                        </div>

Teraz w czym mam problem. Jak najlepiej rozwiązać takie coś by to miało rece i nogi.