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

Download

• SCSS/SASS
  • 360main.scss
• Javascript
  • 360main.jsun-minified

Or download it directly from GitHub.

How to Use It

HTML

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"
		li
			img src='http://demosthenes.info/assets/images/wanaka-tree.jpg" alt="" data-imagemodallink="http://demosthenes.info/assets/images/wanaka-tree.jpg" data-captionmodalinfo="Wanaka Tree"/''
	ul
section

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.

CSS

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.

SCSS/SASS

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.

Javascript

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');
$parentElement.threeSixtyDim();

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
};
$parentElement.threeSixtyDim(tDOptions);

or...

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

The full list of options can be found here.