php - Display a specific slide on page load based on the link selected

I'm using a JQuery slider that displays 4 adjacent Wordpress posts in one slide. The posts are displaying services that the user can click on to view the selected service. There are 2 slides that show these service - 4 in each slide. Each service page includes the slider at the top, with the service descriptions under it.

http://www.richmindonline.com/virtual/service-options/

The problem is that I want the 2nd slide to load first - only when the user chooses a product on the 2nd slide.

How do I set this up? Here's the script for loading the slider - it's inside of a plugin in Wordpress.

I will upload additional code if needed.

   //$upload_dir = wp_upload_dir();
$output = '<!--Automatic Image Slider w/ CSS & jQuery with some customization-->';
$output .='<script type="text/javascript">
$j = jQuery.noConflict();
$j(document).ready(function() {';

//Set Default State of each portfolio piece
if ($pagination_style != '3' ){
    $output .='$j("#rps .paging").show();';
}
$output .='$j("#rps .paging a:first").addClass("active");

$j(".slide").css({"width" : '.$width.'});
$j("#rps .window").css({"width" : '.($width).'});
$j("#rps .window").css({"height" : '.$height.'});

$j("#rps .col").css({"width" : '.(($width/$post_per_slide)-2).'});
$j("#rps .col").css({"height" : '.($height-4).'});
$j("#rps .col p.post-title span").css({"color" : "'.($post_title_color).'"});
$j("#rps .post-date").css({"top" : '.($height-20).'});
$j("#rps .post-date").css({"width" : '.(($width/$post_per_slide)-12).'});';

if (!empty($post_title_bg_color_js)){
    $output .='$j("#rps .col p.post-title").css({"background-color" : "'.($post_title_bg_color_js).'"});';
}

$output .='var imageWidth = $j("#rps .window").width();
//var imageSum = $j("#rps .slider div").size();
var imageReelWidth = imageWidth * '.$paging.';

//Adjust the image reel to its new size
$j("#rps .slider").css({"width" : imageReelWidth});

//Paging + Slider Function
rotate = function(){    
    var triggerID = $active.attr("rel") - 1; //Get number of times to slide
    //alert(triggerID);
    var sliderPosition = triggerID * imageWidth; //Determines the distance the image reel needs to slide

    $j("#rps .paging a").removeClass("active"); 
    $active.addClass("active");

    //Slider Animation
    $j("#rps .slider").stop(true,false).animate({ 
        left: -sliderPosition
    }, 500 );
}; 
var play;
//Rotation + Timing Event
rotateSwitch = function(){      
    play = setInterval(function(){ //Set timer - this will repeat itself every 3 seconds
        $active = $j("#rps .paging a.active").next();
        if ( $active.length === 0) { //If paging reaches the end...
            $active = $j("#rps .paging a:first"); //go back to first
        }
        rotate(); //Trigger the paging and slider function
    }, '.$slider_speed.');
};

rotateSwitch(); //Run function on launch

//On Hover
$j("#rps .slider a").hover(function() {
    clearInterval(play); //Stop the rotation
}, function() {
    rotateSwitch(); //Resume rotation
}); 

//On Click
$j("#rps .paging a").click(function() { 
    $active = $j(this); //Activate the clicked paging
    //Reset Timer
    clearInterval(play); //Stop the rotation
    rotate(); //Trigger rotation immediately
    rotateSwitch(); // Resume rotation
    return false; //Prevent browser jump to link anchor
}); 
});

</script>';
Copy code