Forums

alliwagner

Hi all,

I need a quick help please.

I would like to have multiple sliders on the same page. Right now, I have three sliders set up ---but they all still call to the same slider div. Ive tried everything, please help!

link to my test page:
http://www.alliwagner.com/easySlider/01.html

<!DOCTYPE html PUBLIC \"-//W3C//DTD XHTML 1.0 Transitional//EN\" \"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd\">
<html xmlns=\"http://www.w3.org/1999/xhtml\">
<head>
<meta http-equiv=\"Content-Type\" content=\"text/html; charset=utf-8\" />
<title>Easy Slider jQuery Plugin Demo</title>
<script type=\"text/javascript\" src=\"js/jquery.js\"></script>
<script type=\"text/javascript\" src=\"js/easySlider.js\"></script>
<script type=\"text/javascript\">
	$(document).ready(function(){
$(\"#slider\").easySlider({
prevId: 'btnPrev',
nextId: 'btnNext'
});
$(\"#slider2\").easySlider({
prevId: 'btnPrev2',
nextId: 'btnNext2'
});

$(\"#slider3\").easySlider({
prevId: 'btnPrev3',
nextId: 'btnNext3'
});
}); 
</script>

<style>
body {
	margin:0;
	padding:40px;
	background:#fff;
	font:80% Arial, Helvetica, sans-serif;
	color:#555;
	line-height:180%;
}
h1{
	font-size:180%;
	font-weight:normal;
	}
h2{
	font-size:160%;
	font-weight:normal;
	}	
h3{
	font-size:140%;
	font-weight:normal;
	}	
img{border:none;}
pre{
	display:block;
	font:12px \"Courier New\", Courier, monospace;
	padding:10px;
	border:1px solid #bae2f0;
	background:#e3f4f9;	
	margin:.5em 0;
	width:500px;
	}		

/* Easy Slider */

	#slider ul, #slider li{
		margin:0;
		padding:0;
		list-style:none;
		}
	#slider, #slider li{ 
		/* 
			define width and height of container element and list item (slide)
			list items must be the same size as the slider area
		*/ 
		width:696px;
		height:241px;
		overflow:hidden; 
		}
	span#prevBtn{}
	span#nextBtn{}					

/* // Easy Slider */


/* Easy Slider */

	#slider2 ul, #slider2 li{
		margin:0;
		padding:0;
		list-style:none;
		}
	#slider2, #slider2 li{ 
		/* 
			define width and height of container element and list item (slide)
			list items must be the same size as the slider area
		*/ 
		width:696px;
		height:241px;
		overflow:hidden; 
		}
	span#prevBtn2{}
	span#nextBtn2{}					

/* // Easy Slider */


/* Easy Slider */

	#slider3 ul, #slider3 li{
		margin:0;
		padding:0;
		list-style:none;
		}
	#slider3, #slider3 li{ 
		/* 
			define width and height of container element and list item (slide)
			list items must be the same size as the slider area
		*/ 
		width:696px;
		height:241px;
		overflow:hidden; 
		}
	span#prevBtn3{}
	span#nextBtn3{}					

/* // Easy Slider */

</style>
</head>
<body>

	
	<div id=\"slider\">
		<ul>				
			<li><a href=\"http://templatica.com/preview/30\"><img src=\"images/01.jpg\" alt=\"Css Template Preview\" /></a></li>
			<li><a href=\"http://templatica.com/preview/7\"><img src=\"images/02.jpg\" alt=\"Css Template Preview\" /></a></li>
			<li><a href=\"http://templatica.com/preview/25\"><img src=\"images/03.jpg\" alt=\"Css Template Preview\" /></a></li>
			<li><a href=\"http://templatica.com/preview/26\"><img src=\"images/04.jpg\" alt=\"Css Template Preview\" /></a></li>
			<li><a href=\"http://templatica.com/preview/27\"><img src=\"images/05.jpg\" alt=\"Css Template Preview\" /></a></li>			
		</ul>
	</div>
    
    

    <div id=\"slider2\">
		<ul>				
			<li><a href=\"http://templatica.com/preview/30\"><img src=\"images/01.jpg\" alt=\"Css Template Preview\" /></a></li>
			<li><a href=\"http://templatica.com/preview/7\"><img src=\"images/02.jpg\" alt=\"Css Template Preview\" /></a></li>
			<li><a href=\"http://templatica.com/preview/25\"><img src=\"images/03.jpg\" alt=\"Css Template Preview\" /></a></li>
			<li><a href=\"http://templatica.com/preview/26\"><img src=\"images/04.jpg\" alt=\"Css Template Preview\" /></a></li>
			<li><a href=\"http://templatica.com/preview/27\"><img src=\"images/05.jpg\" alt=\"Css Template Preview\" /></a></li>			
		</ul>
	</div>
    
  
    <div id=\"slider3\">
		<ul>				
			<li><a href=\"http://templatica.com/preview/30\"><img src=\"images/01.jpg\" alt=\"Css Template Preview\" /></a></li>
			<li><a href=\"http://templatica.com/preview/7\"><img src=\"images/02.jpg\" alt=\"Css Template Preview\" /></a></li>
			<li><a href=\"http://templatica.com/preview/25\"><img src=\"images/03.jpg\" alt=\"Css Template Preview\" /></a></li>
			<li><a href=\"http://templatica.com/preview/26\"><img src=\"images/04.jpg\" alt=\"Css Template Preview\" /></a></li>
			<li><a href=\"http://templatica.com/preview/27\"><img src=\"images/05.jpg\" alt=\"Css Template Preview\" /></a></li>			
		</ul>
	</div>
	

	


</body>
</html>

Thanks,
allison

apostrophe

Are you using the latest version of easy slider?
http://cssglobe.com/post/4004/easy-slider-15-the-easiest-jquery-plugin-for-sliding
The original version didn't support multiple sliders but 1.5 definitely does.

treehouse : what would you like to learn today?

Forums

Multiple instances of slider on same page