Theme with multiple Sliders on Home Page

Hello,

I am quite new to this. I am trying to create a custom theme purely to learn and improve my knowledge. I am modifying a free theme I found online locally on my PC and I am struggling to get multiple sliders on the home page (was looking to do three in total). can any one help?

In my style.css I have:

#slider {
	position:relative;
	background:url(images/loading.gif) no-repeat 50% 40%;
	height:370px;
}
#slider img {
	position:absolute;
	top:0px;
	left:0px;
	display:none;
	z-index:1;
}

I assume I need to add another two for sliders 2 and 3?

In my functions.php I have:

/*******************************
   SLIDESHOW CUSTOM POST TYPES
********************************/
register_post_type( 'slideshow',
    array(
      'labels' => array(
        'name' => __( 'Slider Items' ), //this name will be used when will will call the investments in our theme
        'singular_name' => __( 'Slider Item' ),
		'add_new' => _x('Add New', 'slideshow'),
		'add_new_item' => __('Add New Slider Item'), //custom name to show up instead of Add New Post. Same for the following
		'edit_item' => __('Edit Slider Item'),
		'new_item' => __('New Slider Item'),
		'view_item' => __('View Slider Item'),
      ),
      'public' => true,
	  'show_ui' => true,
	  'exclude_from_search' => true,
	  'hierarchical' => false, //it means we cannot have parent and sub pages
	  'capability_type' => 'post', //will act like a normal post
	  'rewrite' => false, //this is used for rewriting the permalinks
	  'query_var' => false,
	  'supports' => array( 'title',	'thumbnail'), //the editing regions that will support

    )
  );

 /*******************************
   SLIDESHOW CUSTOM META
********************************/

add_action('admin_init','slideshow_meta_init');

function slideshow_meta_init()
{

	// add a meta box for each of the wordpress page types: posts and pages
	add_meta_box('slideshow_all_meta', 'Silder Item Settings', 'slideshow_meta_setup', 'slideshow', 'normal', 'high');

	// add a callback function to save any data a user enters in
	add_action('save_post','slideshow_meta_save');
}

function slideshow_meta_setup()
{
	global $post;

	// using an underscore, prevents the meta variable
	// from showing up in the custom fields section
	$meta = get_post_meta($post->ID,'_slideshow_meta',TRUE);

	echo '<div class="my_meta_control">

	<p style="margin:6px 0 8px;">Set the caption text and the link of the slider item. The image should be set as <strong>Featured Image</strong> of the item. For proper display use images  940px X 370px.</p>
	<br/>

	<label>Slider Item Caption Text</label>

	<p style="margin:6px 0 8px;">
		<textarea name="_slideshow_meta[caption]" rows="3" cols="40">';?><?php if(!empty($meta['caption'])) echo $meta['caption']; ?><?php echo '</textarea>
	</p>

	<label>Linking to (optional) <small>enter URL</small></label>

	<p style="margin:6px 0 8px;">
		<textarea name="_slideshow_meta[linkto]" rows="2" cols="40">';?><?php if(!empty($meta['linkto'])) echo $meta['linkto']; ?><?php echo '</textarea>
	</p>

</div>';

	// create a custom nonce for submit verification later
	echo '<input type="hidden" name="slideshow_meta_noncename" value="' . wp_create_nonce(__FILE__) . '" />';
}

function slideshow_meta_save($post_id)
{
	// authentication checks

	// make sure data came from our meta box
	if (!wp_verify_nonce($_POST['slideshow_meta_noncename'],__FILE__)) return $post_id;

	// check user permissions
	if ($_POST['post_type'] == 'slideshow')
	{
		if (!current_user_can('edit_page', $post_id)) return $post_id;
	}
	else
	{
		if (!current_user_can('edit_post', $post_id)) return $post_id;
	}

	// authentication passed, save data

	// var types
	// single: _my_meta[var]
	// array: _my_meta[var][]
	// grouped array: _my_meta[var_group][0][var_1], _my_meta[var_group][0][var_2]

	$current_data = get_post_meta($post_id, '_slideshow_meta', TRUE);	

	$new_data = $_POST['_slideshow_meta'];

	slideshow_meta_clean($new_data);

	if ($current_data)
	{
		if (is_null($new_data)) delete_post_meta($post_id,'_slideshow_meta');
		else update_post_meta($post_id,'_slideshow_meta',$new_data);
	}
	elseif (!is_null($new_data))
	{
		add_post_meta($post_id,'_slideshow_meta',$new_data,TRUE);
	}

	return $post_id;
}

function slideshow_meta_clean(&$arr)
{
	if (is_array($arr))
	{
		foreach ($arr as $i => $v)
		{
			if (is_array($arr[$i]))
			{
				slideshow_meta_clean($arr[$i]);

				if (!count($arr[$i]))
				{
					unset($arr[$i]);
				}
			}
			else
			{
				if (trim($arr[$i]) == '')
				{
					unset($arr[$i]);
				}
			}
		}

		if (!count($arr))
		{
			$arr = NULL;
		}
	}
}

 function edit_slideshow_columns($slideshow_columns) {
	$columns = array(
		"cb" => "<input type=\"checkbox\" />",
		"title" => _x('Slider Item Title', 'column name' ),
		"caption" => __('Caption Text' ),
		"link" => __('Link'),
		"thumbnail" => __('Thumbnail')
	);

	return $columns;
}
add_filter('manage_edit-slideshow_columns', 'edit_slideshow_columns');

function manage_slideshow_columns($column) {
	global $post;
	$slideshow_meta = get_post_meta($post->ID,'_slideshow_meta',TRUE);
	if ($post->post_type == "slideshow") {
		switch($column){
			case 'thumbnail':
				echo the_post_thumbnail('thumbnail');
				break;
			case 'caption':
				echo $slideshow_meta['caption'];
				break;
			case 'link':
				echo '<a href="'.$slideshow_meta['linkto'].'">'.$slideshow_meta['linkto'].'</a>';
				break;
		}
	}
}
add_action('manage_posts_custom_column', 'manage_slideshow_columns', 10, 2);

I have tried to add a second menu option for slider 2 and 3, but they just rename the menu created above.

And finally, on my home.php I have

<!-- BEGIN SLIDER -->
<?php if(get_option('journal_slider')=='yes'){
	$slideshowloop = new WP_Query( array( 'post_type' => 'slideshow', 'order' => 'ASC' ) ); ?>
	<div id="slider">
	<?php
			if($slideshowloop -> have_posts()){
			while ( $slideshowloop->have_posts() ) : $slideshowloop->the_post();
			$slideshow_meta = get_post_meta($post->ID,'_slideshow_meta',TRUE);
			?>
			<a href="<?php echo $slideshow_meta['linkto'];?>">
			<?php //the_post_thumbnail('slider-thumbnail',array("title" => ''.$slideshow_meta['caption'].''));?>
			<img src="<?php bloginfo('template_directory'); ?>/timthumb.php?src=<?php echo get_image_path($post->ID); ?>&h=370&w=940&zc=1" alt="<?php the_title(); ?>" title="<?php echo $slideshow_meta['caption'];?>">
			</a>
			<?php
			endwhile;
			}else{?>
				<div style="border:1px solid #ddd; background:#000; opacity:0.5;text-align:center; padding:150px 100px 0; height:219px; font-size:14px; ">				<span style="opacity:1;color:#fff;text-shadow:none;">This is the slider. In order to have items here you need to create them in Admin > Slider Items section, on the left side menu. For proper display use images 940px x 370px.</span>
				</div>
			<?php }?>

	  </div>
	  <div style="width:940px; margin:0 auto 30px; background:url(<?php bloginfo('template_directory'); ?>/images/bk_shadow_slider.png) 0 -35px no-repeat; height:15px;"></div>
	   <!-- END SLIDER -->

	    <!-- SLIDER SETTINGS -->
	   <script type="text/javascript">
			$(window).load(function() {
				$('#slider').nivoSlider({
					effect:'<?php if(get_option('journal_slider_effect')==''): echo 'random';
						  else: echo get_option('journal_slider_effect');
						  endif;?>',
					slices:<?php if(get_option('journal_slider_slices')==''): echo '15';
						  else: echo get_option('journal_slider_slices');
						  endif;?>,
					animSpeed:<?php if(get_option('journal_slider_animation_speed')==''): echo '500';
						  else: echo get_option('journal_slider_animation_speed');
						  endif;?>,
					pauseTime:<?php if(get_option('journal_slider_pause_time')==''): echo '3000';
						  else: echo get_option('journal_slider_pause_time');
						  endif;?>,
					startSlide:0, //Set starting Slide (0 index)
					directionNav:true, //Next & Prev
					directionNavHide:true, //Only show on hover
					controlNav:true, //1,2,3...
					controlNavThumbs:false, //Use thumbnails for Control Nav
					controlNavThumbsFromRel:false, //Use image rel for thumbs
					controlNavThumbsSearch: '.jpg', //Replace this with...
					controlNavThumbsReplace: '_thumb.jpg', //...this in thumb Image src
					keyboardNav:true, //Use left & right arrows
					pauseOnHover:true, //Stop animation while hovering
					manualAdvance:false, //Force manual transitions
					captionOpacity:<?php if(get_option('journal_slider_caption_opacity')==''): echo '0.8';
						  else: echo get_option('journal_slider_caption_opacity');
						  endif;?>, //Universal caption opacity
					beforeChange: function(){},
					afterChange: function(){},
					slideshowEnd: function(){} //Triggers after all slides have been shown
				});
			});
			</script>
	<?php }else{?>
<?php }else{?>

Yet again presumably I will need to do a couple more of these?

Any help would be most grateful

Cheers