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

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

Contents

CSS Code for Rotating Multiple Images from Back to Front
JavaScript Code for Rotating Multiple Images from Back to Front Using cloud-carousel.js
HTML Code for Rotating Multiple Images from Back to Front Using cloud-carousel.js
cloud-carousel: Demo Page for Rotating Multiple Images from Back to Front
Source: Professor Cloud

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-->