Simple 3D Carousel

demo

Have a look for yourself at the Simple 3D Carousel demo.

download

Feel free to download the Simple 3D Carousel.

After having a play about with these two examples for a while it got me in to thinking, “how easy it would it be to implement a 3D Carousel myself?“

Well after carrying out some research and using the two above examples as a foundation I created a basic 3D Carousel. This example will be the first instalment in which I demonstrate the basic Carousel and further more advanced tutorials will be added at a later date.

So here we go…

code

html

As can be seen below the HTML is very simple and consists of a main container wrapping several divs with images inside. That is all that is required at this stage from an html perspective. Obviously the number of images and the images themselves can be changed here.

<div id="carousel">

<div><a href="#"><img src="/images/dreamweaver.png" /></a></div>

<div><a href="#"><img src="/images/director.png" /></a></div>

<div><a href="#"><img src="/images/flash.png" /></a></div>

<div><a href="#"><img src="/images/freehand.png" /></a></div>

<div><a href="#"><img src="/images/swf-player.png" /></a></div>

<div><a href="#"><img src="/images/coldfusion.png" /></a></div></div>

css

The CSS is also very simple setting the style attributes for the main container as well as the images width and height within each of their containing divs. One point to note would be that the width and height of the carousel container should be edited as desired to meet your needs althoug further editing will be needed below as shown.

<style>

#carousel{

background-color:#000000;

width:700px;

height:400px;

position:relative;

border:1px solid #FFFFFF;

}img{

width:100%;

height:100%;

border:0px solid #FFFFFF;

}

</style>

JavaScript Variables

This is where understanding is required to set up the carousel. baseSpeed is the initial speed of the carousel, the higher the value the faster it will spin, radiusX and radiusY are the horizontal and vertical radiuses of the carousel so adjust these to effectively change the width and height.

centerX and centerY pinpoint the center of the accordion with in the main container. These will need to be amended if the main containers width and height attributes are amended.

Finally speed is used in conjunction with baseSpeed to set the initial speed of the carousel, although, the speed will be altered depending on the position x of the mouse over the carousel container.

var baseSpeed = 0.05; 

var radiusX = 190; 

var radiusY = 40; 

var centerX = 300; 

var centerY = 190;

var speed = 0.3;

Set as favorite

Bookmark

Email this

Comments (5) add comment

Show/hide comments

Been There said:

	... @Own Up: You did. http://www.andrewsellick.com/7...g-mootools Oct. 31, 2007.
	report abuse vote down vote up

December 31, 2009
Votes: +0

unrealxlife said:

	... Thanks , Very Nice
	report abuse vote down vote up

October 29, 2009 | url
Votes: +1

DrummerHead said:

	... Check out my Simple 3D Carousel implementation. The behaviour has been modified, but it's basically it. English version: http://www.pixeina.com/index-en.html Original: http://www.pixeina.com/
	report abuse vote down vote up

April 07, 2009 | url
Votes: +0

Own Up said:

	... Hmm, I'm sure I've seen this somewhere else.... I get really fed up when I see content theft like this. You have not referenced the source of this content and to put it quite simply you are the pond life of the digital world.
	report abuse vote down vote up

January 22, 2009
Votes: -1

jtb said:

	... Nice work! Thank you. In case you're interested, I've just implemented 3dcarousel on my site: http://www.jtbullitt.com/objects/
	report abuse vote down vote up