Options

Configuration

The Bee3D configuration options. These are passed in as the second parameter to the Bee3D() function. Check out the example below for more.

Basic Options

Option	Type	Default	Description
wrapper	element	document.body	main wrapper, watches for gestures
selector	string	'.bee3D--slide'	slides' selector class
effect	string	'coverflow'	scroll class to apply: coverflow, classic, cube, carousel, concave, wave, arc, spiral-left, spiral-right
focus	integer	0	slide to focus on init

Listeners

Interactions/Inputs that we want the slider to listen to.

All options below are wrapped in a listeners object

Option	Type	Default	Description
keys	boolean	false	keyboard keys
touches	boolean	false	touch/swipe (mobile)
clicks	boolean	false	click non-active slides to show
scroll	boolean	false	mouse scroll wheel
drag	boolean	false	mouse drag/swipe

Navigation

If the slider is to use the navigation arrows.

All options below are wrapped in a navigation object.

Note: You must include navigation markup in your HTML.
See the Navigation documentation for more info.

Option	Type	Default	Description
enabled	boolean	false	to use or not to use
next	string	'.bee3D--nav__next'	A unique selector for the next trigger.
prev	string	'.bee3D--nav__prev'	A unique selector for the prev trigger.

AJAX

If the slider is to make AJAX requests & dynamically add new slides

All options below are wrapped in a ajax object.

Note: See the AJAX documentation for more information.

Option	Type	Default	Description
enabled	boolean	false	use ajax calls?
path	string	null	URL to query
when	integer	2	when to make the request? eg: 2nd to last slide
maxFetches	integer	null	max # of times to query this path/URL null == infinite fetches
constructor	function	fn(data){}	function callback to build each new slide with data's contents

Autoplay

If the slider is to autoplay its slides.

All options below are wrapped in a autoplay object

Option	Type	Default	Description
enabled	boolean	false	use autoplay?
speed	integer	5000	autoplay time (ms) per slide
pauseHover	boolean	false	pause autoplay on hover ?

Loop

If the slider is to loop through its slides, instead of ending on the last one.

All options below are wrapped in a loop object

Option	Type	Default	Description
enabled	boolean	false	loop back to start?
continuous	boolean	false	continuous loop effect?
offset	integer	2	# of slides to offset to make loop seem infinite may be different for each effect

Sync

If the slider is to sync its active index with other sliders.

All options below are wrapped in a sync object.

Note: See the Synchronization documentation for more information.

Option	Type	Default	Description
enabled	boolean	false	use sync?
targets	array	null	Array of slider variable names (strings) that this slider should broadcast to

Parallax

If the slider is to use parallax effects.

All options below are wrapped in a parallax object

Note: See the Parallax documentation if enabling parallax.

Option	Type	Default	Description
enabled	boolean	false	use parallax effect?
className	string	'bee3D--parallax'	class name to add, used for CSS only
friction	decimal	0.7	data-depth attribute
settings	object	--	See the Official Parallax Documentation for more.

Shadows

If the slider is to add shadows to its slides.

All options below are wrapped in a shadows object

Option	Type	Default	Description
enabled	boolean	false	cast shadows under slides?
template	HTML String	'<div class="bee3D--shadow-wrapper"><div class="bee3D--shadow"><span></span></div></div>'	HTML to be appended to each slide

Callbacks

Optional callbacks you may plug in to.

Option	Type	Default	Description
onInit	function	null	when slider initializes
onChange	function	null	when slider changes its active slide
onDestroy	function	null	when slider is destroyed

Example

Example usage of how to configure a Bee3D slider.

var el = document.getElementById('demo');

var slider = new Bee3D(el, {
  effect: 'spiral-right',
  focus: 4,
  listeners: {
    keys: true,
    touches: true
  },
  navigation: {
    enabled: true
  },
  ajax: {
    enabled: true,
    path: '/api/posts',
    constructor: function(data){
      var slide = "<h1 class='demo-title'>" + data.title + "</h1>";
      slide += "<p class='demo-summary'>" + data.summary + "</p>";
      return slide;
    }
  },
  parallax: {
    enabled: true
  },
  onInit: function(){
    alert("Slider Initialized!");
  }
});