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