Slider navigation question (PHP)

[Mr.Canuck]

Good day. I am using a slider on my site. You can see it here: http://aissolutions.ca/clients/enerquality/ It is working good. The only thing I want to change is instead of having the prev / next button arrows below the text to change the slider, I want to have a "circle" navigation, like it is on this site: http://www.builtgreencanada.ca/ Does anyone know how this can be done?

Thanks.

 

<?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:0;
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:0;
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: right; margin-right:0px; 
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 {
float:right; margin-right:25px;
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; margin-left:0px; background: url(http://aissolutions.ca/clients/enerquality/wp-content/themes/Enerquality_Custom/images/sldbg.png) no-repeat; padding:20px 20px 0 20px; min-height:280px;
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 {
width:220px; margin-left:37px;
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: 10px;
margin-top:10px;
}

#featured_slider .content_left h2 a {
font-size: 20px !important;
font-weight:bold;
width:220px;
margin-left:37px;
margin-top:10px;
margin-bottom: 20px;
color:#ccc;
}

#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: 74px;
cursor: pointer;
bottom: 35px;
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: 18px;
z-index: 10;
height: 16px;
position: absolute;
left: 94px;
bottom: 35px;
cursor: pointer;
}

#featured_slider .feat_next:hover {
background-position: -18px -16px;
}

.feat_link {
float: right;
position: relative;
top: -5px;
}

.feat_link a {
float: left;
font-size: 9px;
color: #CCC;
}

</style>

<div id="featured_slider">


<ul id="slider">

	<?php
	global $wpdb;

	$querystr = "
		SELECT wposts.* 
		FROM $wpdb->posts wposts, $wpdb->postmeta wpostmeta
		WHERE wposts.ID = wpostmeta.post_id 
		AND wpostmeta.meta_key = 'feat_slider' 
		AND wpostmeta.meta_value = '1' 
		AND wposts.post_status = 'publish' 
		AND (wposts.post_type = 'post' OR wposts.post_type = 'page')";

	$pageposts = $wpdb->get_results($querystr, OBJECT); ?>

	<?php if ($pageposts): ?>

		<?php global $post; ?>

		<?php foreach ($pageposts as $post): ?>

		<?php setup_postdata($post);

		$custom = get_post_custom($post->ID);

		$thumb = get_wp_generated_thumb("feat_slider");

	?>

	<li><div class="content_left"><h2><a href="<?php the_permalink();?>"><?php the_title();?></a></h2><?php the_excerpt();?></div><div class="img_right"><a href="<?php the_permalink();?>"><img src="<?php echo $thumb;?>" /></a></div></li>

	<?php endforeach; ?>

	<?php endif; ?>

</ul>

<div class="feat_next"></div>
<div class="feat_prev"></div>


</div>

 

<?php

/* options page */

$options_page = get_option('siteurl') . '/wp-admin/admin.php?page=wp-featured-content-slider/options.php';

function slider_options_page() {
add_options_page('Featured Content Slider Options', 'Featured Content Slider', 10, 'wp-featured-content-slider/options.php');
}

add_action('admin_menu', 'slider_options_page');

function add_feat_scripts() {
    if ( !is_admin() ) {
wp_register_script('jquery.cycle', get_bloginfo('url') . '/wp-content/plugins/wp-featured-content-slider/scripts/jquery.cycle.all.2.72.js', array('jquery'), '1.3' );
wp_enqueue_script('jquery.cycle');
    }
}

add_action('wp_enqueue_scripts', 'add_feat_scripts');


function cut_text_feat($text, $chars, $points = "...") {
$length = strlen($text);
if($length <= $chars) {
	return $text;
} else {
	return substr($text, 0, $chars)." ".$points;
}
}

add_action("admin_init", "feat_init");
add_action('save_post', 'save_feat');

function feat_init(){
    add_meta_box("feat_slider", "Featured Content Slider Options", "feat_meta", "post", "normal", "high");
    add_meta_box("feat_slider", "Featured Content Slider Options", "feat_meta", "page", "normal", "high");
}

function feat_meta(){
    global $post;
    $custom = get_post_custom($post->ID);
    $feat_slider = $custom["feat_slider"][0];
?>
<div class="inside">
	<table class="form-table">
		<tr>
			<th><label for="feat_slider">Feature in Featured Content Slider?</label></th>
			<td><input type="checkbox" name="feat_slider" value="1" <?php if($feat_slider == 1) { echo "checked='checked'";} ?></td>
		</tr>
	</table>
</div>
<?php
}

function save_feat(){
    if ( defined('DOING_AUTOSAVE') && DOING_AUTOSAVE ) 
    return $post_id;
    global $post;
    if($post->post_type == "post" || $post->post_type == "page") {
update_post_meta($post->ID, "feat_slider", $_POST["feat_slider"]);
    }
}

function insert_feat($atts, $content = null) {
    include (ABSPATH . '/wp-content/plugins/wp-featured-content-slider/content-slider.php');
}
add_shortcode("featslider", "insert_feat");

$img_width = get_option('img_width');

if(empty($img_width)) {
$img_width = 320;
}

$img_height = get_option('img_height');

if(empty($img_height)) {
$img_height = 200;
}

if (function_exists('add_image_size')) { 
add_image_size( 'feat_slider', $img_width, $img_height, true ); 
}

function get_wp_generated_thumb($position) {
$thumb = get_the_post_thumbnail($post_id, $position);
$thumb = explode("\"", $thumb);
return $thumb[5];
}

//Check for Post Thumbnail Support

add_theme_support( 'post-thumbnails' );

?>