Jquery cycle slides overlap on page-load on Wordpress Blog - jquery-cycle

Question

I am using the wordpress plugin WP Featured Content Slider which uses the jquery.cycle.all.2.72.js. I am getting a really bizarre visual glitch. On page load, all the slides are shown on top of each other, then as the script cycles through each slide, sometimes it eventually fixes itself (until the page is reloaded).
I found another topic on this forum with the same problem and solution listed jQuery Cycle Slides overlap on page load
But I am not a technical person..can someone tell me where i need to put the codes suggested in the above solution in a wordpress self hosted blog.
Find the example here http://ramblingego.com
The Content Slider PHP Code is as below
<?php
$direct_path = get_bloginfo('wpurl')."/wp-content/plugins/wp-featured-content-slider";
?>
<script type="text/javascript">
jQuery('#featured_slider ul').cycle({
fx: '<?php $effect = get_option('effect'); if(!empty($effect)) {echo $effect;} else {echo "scrollLeft";}?>',
prev: '.feat_prev',
next: '.feat_next',
speed: 800,
timeout: <?php $timeout = get_option('timeout'); if(!empty($timeout)) {echo $timeout;} else {echo 4000;}?>,
pager: null
});
</script>
<style>
#featured_slider {
float: left;
margin: 10px 0px;
position: relative;
background-color: #<?php $bg = get_option('feat_bg'); if(!empty($bg)) {echo $bg;} else {echo "FFF";}?>;
border: 1px solid #<?php $border = get_option('feat_border'); if(!empty($border)) {echo $border;} else {echo "CCC";}?>;
width: <?php $width = get_option('feat_width'); if(!empty($width)) {echo $width;} else {echo "860";}?>px;
}
#featured_slider ul, #featured_slider ul li {
list-style: none !important;
border: none !important;
float: left;
margin: 10px;
width: <?php $width = get_option('feat_width'); if(!empty($width)) {echo $width;} else {echo "860";}?>px;
height: <?php $height = get_option('feat_height'); if(!empty($height)) {echo $height;} else {echo "210";}?>px;
}
#featured_slider .img_right {
float: left;
width: <?php $img_width = get_option('img_width'); if(!empty($img_width)) {echo $img_width;} else {echo "320";}?>px;
height: <?php $img_height = get_option('img_height'); if(!empty($img_height)) {echo $img_height;} else {echo "200";}?>px;
margin-left: 20px;
}
#featured_slider .img_right img {
width: <?php $img_width = get_option('img_width'); if(!empty($img_width)) {echo $img_width;} else {echo "320";}?>px;
height: <?php $img_height = get_option('img_height'); if(!empty($img_height)) {echo $img_height;} else {echo "200";}?>px;
}
#featured_slider .content_left {
float: left;
color: #<?php $text_color = get_option('text_color'); if(!empty($text_color)) {echo $text_color;} else {echo "333";}?>;
width: <?php $text_width = get_option('text_width'); if(!empty($text_width)) {echo $text_width;} else {echo "450";}?>px;
}
#featured_slider .content_left p {
line-height: 22px !important;
color: #<?php $text_color = get_option('text_color'); if(!empty($text_color)) {echo $text_color;} else {echo "333";}?>;
}
#featured_slider .content_left h2 {
font-size: 20px !important;
margin-bottom: 20px;
}
#featured_slider .feat_prev {
background: transparent url(<?php echo $direct_path;?>/images/sprite.png) no-repeat;
background-position: 0px 0px;
width: 17px;
z-index: 10;
height: 16px;
position: absolute;
left: 20px;
cursor: pointer;
bottom: 30px;
float: left;
}
#featured_slider .feat_prev:hover {
background-position: 0px -16px;
}
#featured_slider .feat_next {
background: transparent url(<?php echo $direct_path;?>/images/sprite.png) no-repeat;
background-position: -17px 0px;
width: 17px;
z-index: 10;
height: 16px;
position: absolute;
left: 40px;
bottom: 30px;
cursor: pointer;
}
#featured_slider .feat_next:hover {
background-position: -18px -16px;
}
</style>
<div id="featured_slider">
<ul id="slider">
<?php
$sort = get_option('sort'); if(empty($sort)){$sort = "post_date";}
$order = get_option('order'); if(empty($order)){$order = "DESC";}
$limit = get_option('limit'); if(empty($limit)){$limit = 350;}
$points = get_option('points'); if(empty($points)){$points = "...";}
$post_limit = get_option('limit_posts'); if(empty($limit_posts)){$limit_posts = "-1";}
global $wpdb;
global $post;
$args = array( 'meta_key' => 'feat_slider', 'meta_value'=> '1', 'suppress_filters' => 0, 'post_type' => array('post', 'page'), 'orderby' => $sort, 'order' => $order, 'numberposts'=> $post_limit);
$myposts = get_posts( $args );
foreach( $myposts as $post ) : setup_postdata($post);
$custom = get_post_custom($post->ID);
$thumb = get_wp_generated_thumb("feat_slider");
?>
<li><div class="content_left"><h2><?php the_title();?></h2><?php echo cut_text_feat(get_the_content(), $limit, $points);?></div><div class="img_right"><img src="<?php echo $thumb;?>" /></div></li>
<?php endforeach; ?>
</ul>
<div class="feat_next"></div>
<div class="feat_prev"></div>
</div>

Answer 1

If you can't output all the slides with display:hidden you can use jquery to hide all of them (except the first one) and then the cycle plugin should do the rest.
Like this:
<script type="text/javascript">
jQuery('#featured_slider ul>li:gt(0)').hide(function() {
jQuery('#featured_slider ul').cycle({
fx: '<?php $effect = get_option('effect'); if(!empty($effect)) {echo $effect;} else {echo "scrollLeft";}?>',
prev: '.feat_prev',
next: '.feat_next',
speed: 800,
timeout: <?php $timeout = get_option('timeout'); if(!empty($timeout)) {echo $timeout;} else {echo 4000;}?>,
pager: null
});
});