JavaScript

How to Rotate Multiple Images from Back to Front Using cloud-carousel.js

 

Here’s how to use cloud-carousel.1.0.5.js to display multiple thumbnail images rotating from the back to the front.

CSS Code for Rotating Multiple Images from Back to Front

*Write the CSS for multiple images, arrows, and image number display area. Modify as needed.

<style type="text/css">
<!--
body{
	margin:0;
	padding:0;
}
h1{
	font-size:16px;
	font-weight:normal;
	line-height:1.6em;
	text-align:center;
	padding:15px 0;
}
#idWrap{
	width:900px;
	margin:0 auto;
	text-align:left;
}
#idCarousel {
	position: relative;
	width:900px;
	height:500px;
	overflow:scroll;
}
#idTitle{
	font-weight:bold;
	padding-bottom:7px;
}
.left{
	display:none;
	width:40px;
	height:40px;
	position:absolute;
	bottom:0;
	left:20px;
	font-weight:bold;
	font-size:30px;
	cursor:pointer;
}
.right{
	display:none;
	width:40px;
	height:40px;
	position:absolute;
	bottom:0;
	right:20px;
	font-weight:bold;
	font-size:30px;
	cursor:pointer;
}
.left:hover,
.right:hover{
	color:#666666;
}
-->
</style>

JavaScript Code for Rotating Multiple Images from Back to Front Using cloud-carousel.js

*Load the jquery.min.js, cloud-carousel.1.0.5.js, and jquery.mousewheel.js files. Set the position, NEXT and PREV buttons, image number, rotation speed, etc. for the multiple image area (#idCarousel).

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script> 
<script type="text/javascript" src="cloud-carousel.1.0.5.js"></script> 
<script type="text/JavaScript" src="jquery.mousewheel.js"></script> 
<script>
$(function(){
  	$("#idCarousel").CloudCarousel({
  			xPos: 450,
  			yPos: 100,
  			buttonLeft: $("#left"),
  			buttonRight: $("#right"),
  			altBox: $("#idAlt"),		//alt
  			titleBox: $("#idTitle"),	//title
  			bringToFront:true,			//Bring clicked image to the front
  			mouseWheel:true,			//Mouse wheel rotation
  			autoRotate:true,			//Automatic rotation
  			autoRotateDelay: 3000		//Rotation speed
  	});
}); 
</script>

HTML Code for Rotating Multiple Images from Back to Front Using cloud-carousel.js

*Prepare 10 images for the multiple image area (id=”idCarousel”). This includes the image number (id=”idTitle”), image alt (id=”idAlt”), NEXT (id=”right”), and PREV (id=”left”) buttons.

<div id="idWrap">
	<h1>Rotating Multiple Images from Back to Front</h1>


    <div id="idCarousel">

        <div id="idTitle"></div>
        <div id="idAlt"></div>
        
        <img class = "cloudcarousel" src="images/i1.jpg" alt="Image 1" title="1st Image" /> 
        <img class = "cloudcarousel" src="images/i2.jpg" alt="Image 2" title="2nd Imag" /> 
        <img class = "cloudcarousel" src="images/i3.jpg" alt="Image 3" title="3rd Image" /> 
        <img class = "cloudcarousel" src="images/i4.jpg" alt="Image 4" title="4th Image" /> 
        <img class = "cloudcarousel" src="images/i5.jpg" alt="Image  5" title="5th Image" /> 
        <img class = "cloudcarousel" src="images/i6.jpg" alt="Image 6" title="6th Image" /> 
        <img class = "cloudcarousel" src="images/i7.jpg" alt="Image 7" title="7th Image" /> 
        <img class = "cloudcarousel" src="images/i8.jpg" alt="Image 8" title="8th Image" /> 
        <img class = "cloudcarousel" src="images/i9.jpg" alt="Image 9" title="9th Image" /> 
        <img class = "cloudcarousel" src="images/i10.jpg" alt="Image 10" title="10th Image" />
        
        <div id="left" class="left">←</div>
        <div id="right" class="right">→</div>

    </div><!--/idCarousel-->

</div><!--/idWrap-->

cloud-carousel: Demo Page for Rotating Multiple Images from Back to Front

cloud-carousel: Demo Page for Rotating Multiple Images from Back to Front

Source: Professor Cloud

Source: Professor Cloud
It looks pretty cool, doesn’t it?

　
*Please use at your own risk.
Do not use the Google Analytics tags in the demo page tags.

cloud-carousel.js Rotate
RELATED POST