ThreeSixtyFlow.js gives you the ability to quickly and easily add 3D carousel sliders to your website without having to:

  • Do the math for Javascript or CSS transforms yourself. (If you hate doing math yet want your gallery to appear like it's floating in space this plugin is for you.)
  • Figure out how to position the slider buttons using CSS for up-down or right-left scrolling. (CSS flexbox solves all your positioning and responsive woes and you can switch these controls on or off using simple true/false statements -- use them only if you need them.)
  • Craft your own animation sequence to make the 3D carousel move on its own.

What Else Can It Do For You?

The plugin will...

  • Show more than just images... you can also use other kinds of element blocks as "slides". (Simply change the 'itemTarget'.)
  • Display dozens of images or other element blocks -- ThreeSixtyFlow adapts and expands to hold them all with plenty of space in between thanks to the power of math.

What This Plugin Does Not Do

This plugin isn't for every developer's case.

  • The carousel doesn't slide to the next image when it is vertical in any way due to a limitation on the way "transform-origin" works.
  • If you set the carousel to be perfectly vertical on the screen like a pole, the images will rotate so that they're in the right orientation however it's not perfect... yet.
  • The size of image items or other display items is limited to 425px at this time. (You can change this in the CSS however you'll have to play with the "translateY" and "translateX" plugin options -- see below.)


Or download it directly from GitHub.

How to Use It


First setup your HTML file to:

  • have one parent element with the id of .carousel (the .carousel is a must have class)
  • under the parent, have a child list ul with id of .spinner (the .spinner is needed for this plugin so it's a must have class... also recommend using ul)
  • have each of your images (or element blocks) inside of each of the li elements

NOTE: If you're displaying something other than images, you'll need to change the option of itemTarget from the default .spinner img to .spinner [class/ID of block].

This might look something like (omitting the < and >):

section id="carousel"
	ul id="spinner"
			img src='" alt="" data-imagemodallink="" data-captionmodalinfo="Wanaka Tree"/''

You can also view this example here.

You can have as many 3D carousels you want as long as you follow the above structure each time.

NOTE: If you want the modal ability to work, you can supply two data attributes data-imagemodallink (for a link to the larger version of your carousel image for example) and data-captionmodalinfo (for caption text).

Jade Note

The original Jade node templating files I used are provided as well.

You will find most of the test/demo code in mixins.project.041415.1.jade , index.jade.


The original CSS code was written with SCSS however it was compiled to an un-minified version (style.css).

The un-minified CSS however lacks any comments.

If you want to change the stylesheet you should reference `style.css` and overwrite the properties in your own customized stylesheet that is loaded last in your HTML or Jade file.

NOTE: The stylesheet does import Font Awesome 4.3.0 for the slider buttons.


If you use SCSS/SASS, the file to reference is 360main.scss in the css/partials/ folder.

As with CSS, you should write your own customized CSS code that comes last and overrides the plugin code.


The Javascript is un-minified so if you need to "peek under the hood" you shouldn't have any trouble.

What follows are use cases.

To use the plugin simply give it a reference.

For example:

var $parentElement = $('#carousel');

This will create your ThreeSixtyFlow carousel with the default options.

What if you don't want the default settings?

You can pass options to the plugin using an object.

Example: Setting the carousel to automatically scroll and rotate to the right.

var $parentElement = $('#carousel');
var tDOptions = {
	autoScrollHorizontalEnable: true,
	autoScrollToRight: true


var $parentElement = $('#carousel');
	autoScrollHorizontalEnable: true,
	autoScrollToRight: true

The full list of options can be found here.

You don't have to re-size the carousel using CSS. You can make your adjustments by changing the carouselWidth and carouselHeight options.

In the example below we slash the width to 50% of the view area.

t6D3.carouselRef1 = $('.carousel.carouselDim1');
t6D3.carouselRef1DemoSet = {
	// carousel parent
	carouselDimensionSet: true,
	carouselWidth: "50%",
	carouselHeight: "50vh"

Vertical Ring

You can change the initial position of the carousel ring... all the way to a straight vertical line.

At this time the ring doesn't slide up and down like you would expect however this has potential to create a ferris wheel like effect.

Check back later!

To make the changes below simply set changeInitialRingPosition to true , give rotateX and rotateY a deg value and ... set rotateZImages to true .

t6D3.carouselRef2 = $('.carousel.verticalRing1');
t6D3.carouselRef2DemoSet = {
	changeInitialRingPosition: true,
	rotateX: -90,
	rotateY: 90,
	carouselDimensionSet: true,
	carouselHeight: "100vh",
	rotateZImages: true

Change Initial Position

t6D3.carouselRef3 = $('.carousel.verticalSlash1');
t6D3.carouselRef3DemoSet = {
	changeInitialRingPosition: true,
	rotateX: -45,
	rotateY: 90,
	carouselDimensionSet: true,
	carouselHeight: "100vh",
	rotateZImages: true

Auto Scroll Horizontal

t6D3.carouselRef4 = $('.carousel.autoScrollH1');
t6D3.carouselRef4DemoSet = {
	autoScrollHorizontalEnable: true,
	autoScrollHorizontalTime: 3000,
	autoScrollPauseEnabled: true,
	sliderButtonsUpDownEnable: false

Auto Scroll Vertical

t6D3.carouselRef5 = $('.carousel.autoScrollV1');
t6D3.carouselRef5DemoSet = {
	autoScrollVerticalEnable: true,
	autoScrollVerticalTime: 100,
	autoScrollPauseEnabled: true,
	sliderButtonsRightLeftEnable: false

Auto Scroll Horizontal and Vertical

t6D3.carouselRef6 = $('.carousel.autoScrollHV1');
t6D3.carouselRef6DemoSet = {
	// horizontal
	autoScrollHorizontalEnable: true,
	autoScrollHorizontalTime: 200,
	autoScrollPauseEnabled: true,
	sliderButtonsUpDownEnable: false,
	// vertical
	autoScrollVerticalEnable: true,
	autoScrollVerticalTime: 100,
	autoScrollPauseEnabled: true,
	sliderButtonsRightLeftEnable: false