Multiple image slideshow

Description

This Code will display multiple image slideshows all at one time. Primarily used for an intro to a website but also can be used in other places. In this example there are 4 slideshows. In order for slideshows to work you must have the plugin easySlider1.5.js installed

This Code will display multiple image slideshows all at one time. Primarily used for an intro to a website but also can be used in other places. In this example there are 4 slideshows. In order for slideshows to work you must have the plugin easySlider1.5.js installed

HTML Source Code

                        
                          <!--Multiple Slideshow Start-->
<div class="slider-outter">
<div class="slider-inner">

<div id="slider-containeroutter">
<div id="slider-container">
<div id="slider1">
			<ul>				
				<li><img src="/images/DACDBD.gif"></li>
				<li><img src="/images/DF5C7E.gif"></li>
				<li><img src="/images/EF97A3.gif"></li>
			</ul>
</div>
</div> 
</div> 

<div id="slider-containeroutter">
<div id="slider-container">
<div id="slider2">
			<ul>				
				<li><img src="/images/DACDBD.gif"></li>
				<li><img src="/images/DF5C7E.gif"></li>
				<li><img src="/images/EF97A3.gif"></li>
			</ul>
</div>
</div> 
</div> 

<div id="slider-containeroutter">
<div id="slider-container">
<div id="slider3">
			<ul>				
				<li><img src="/images/DACDBD.gif"></li>
				<li><img src="/images/DF5C7E.gif"></li>
				<li><img src="/images/EF97A3.gif"></li>
			</ul>
</div>
</div> 
</div> 

<div id="slider-containeroutter">
<div id="slider-container">
<div id="slider4">
			<ul>				
				<li><img src="/images/DACDBD.gif"></li>
				<li><img src="/images/DF5C7E.gif"></li>
				<li><img src="/images/EF97A3.gif"></li>
			</ul>
</div>
</div> 
</div> 


</div>
</div>
<!--Multiple Slideshow End-->

CSS Source Code

                        
                          /****4 Image Slide Show Start****/
.slider-outter {
    width: 100%;
} 
.slider-inner {
  height:600px;
  margin-left:auto;
  margin-right:auto;
  width:1350px;
}


#slider-containeroutter {
    float: left;
    height: 600px;
    overflow: hidden;
    padding-right: 3px;
}

#slider-container {
    background: none repeat scroll 0 0 #4F4747;
    float: left;
    height: 600px;
    overflow: hidden;
    width: 334px;
} 

#slider-container img{
border:none;
}

 
#slider1 ul, #slider2 ul, #slider3 ul, #slider4 ul {
	margin:0;
	padding:0;
	list-style:none;
	}
	
/*This Controls the width and height of the images in the slide show*/	
#slider1 li, #slider2 li, #slider3 li, #slider4 li{ 
	width:1029px;
	height:600px;
	overflow:hidden; 
	margin:0;
	padding:0;
	list-style:none;
	}	
	
	/****4 Image Slide Show End****/

JavaScript Code

                        
                          <script type="text/javascript">
$(document).ready(function(){	
	$("#slider1").easySlider({
		auto: true,
		vertical: false, 
		continuous: true,
		pause: 2000,
		speed: 800
		
	});
});
</script> 

<script type="text/javascript">
$(document).ready(function(){	
	$("#slider2").easySlider({
		auto: true,
		vertical: false, 
		continuous: true,
		pause: 2000,
		speed: 900
	});
});
</script> 

<script type="text/javascript">
$(document).ready(function(){	
	$("#slider3").easySlider({
		auto: true,
		vertical: false, 
		continuous: true,
		pause: 2000,
		speed: 1000
	});
});
</script> 

<script type="text/javascript">
$(document).ready(function(){	
	$("#slider4").easySlider({
		auto: true,
		vertical: false, 
		continuous: true,
		pause: 2000,
		speed: 1100
	});
});
</script>


Post Categories

Tags