Storyline 3D Slider

Here is a complete settings example for the Storyline 3D Slider:

Axis Settings

axis: {
  type: 'x', // Type of axis, can be 'x', 'y', or 'z'
  length: 500, // Length of the axis in pixels
  ticks: true, // Show axis ticks
  tickLength: 10, // Length of axis ticks in pixels
  tickThickness: 2, // Thickness of axis ticks in pixels
  tickColor: '#333', // Color of axis ticks
  label: 'X Axis', // Label of the axis
  labelPosition: 'top', // Position of the axis label, can be 'top', 'bottom', 'left', or 'right'
  labelSize: 16, // Font size of the axis label
  labelColor: '#333' // Color of the axis label
}

Slider Settings

slider: {
  width: 100, // Width of the slider in pixels
  height: 20, // Height of the slider in pixels
  thickness: 10, // Thickness of the slider handle in pixels
  color: '#337ab7', // Color of the slider handle
  trackColor: '#ccc', // Color of the slider track
  trackWidth: 20, // Width of the slider track in pixels
  handlePosition: 'center', // Position of the slider handle, can be 'left', 'right', or 'center'
  handleSize: 20, // Size of the slider handle in pixels
  snap: true, // Enable snapping to ticks
  snapDistance: 20, // Distance from the slider handle to snap to a tick
  step: 10, // Step size of the slider
  min: 0, // Minimum value of the slider
  max: 100, // Maximum value of the slider
  value: 50, // Initial value of the slider
  onChange: function(value) { // Callback function when the slider value changes
    console.log(value);
  }
}

3D Slider Settings

threeD: {
  enable: true, // Enable 3D slider
  perspective: 500, // Perspective of the 3D slider in pixels
  cameraDistance: 200, // Distance of the camera from the 3D slider in pixels
  cameraPosition: [0, 0, 0], // Position of the camera in 3D space
  cameraRotation: [0, 0, 0], // Rotation of the camera in 3D space
  ambientLight: true, // Enable ambient light
  ambientLightColor: '#888', // Color of the ambient light
  ambientLightIntensity: 0.5, // Intensity of the ambient light
  directionalLight: true, // Enable directional light
  directionalLightColor: '#fff', // Color of the directional light
  directionalLightIntensity: 1, // Intensity of the directional light
  directionalLightPosition: [0, 0, 0], // Position of the directional light in 3D space
  directionalLightRotation: [0, 0, 0], // Rotation of the directional light in 3D space
  shadow: true, // Enable shadows
  shadowMapSize: 512, // Size of the shadow map
  shadowCameraPosition: [0, 0, 0], // Position of the shadow camera in 3D space
  shadowCameraRotation: [0, 0, 0], // Rotation of the shadow camera in 3D space
  fog: true, // Enable fog
  fogColor: '#888', // Color of the fog
  fogDensity: 0.5, // Density of the fog
  fogNear: 100, // Near plane of the fog in pixels
  fogFar: 500 // Far plane of the fog in pixels
}

Animation Settings

animation: {
  duration: 1000, // Duration of the animation in milliseconds
  easing: 'easeInOut', // Easing function of the animation, can be 'easeInOut', 'easeOut', or 'easeIn'
  repeat: 1, // Number of times to repeat the animation
  paused: false // Whether the animation is paused or not
}

Here are the features mentioned in the content:

Main Features:

• 19 color schemes
• 8 incredible scroll effects
• 6 different post styles (blog, circle, image, audio, book, text)
• 5 ways to navigate through slides
• Responsive design
• Touch enabled
• Infinity scroll
• Lots of different post settings
• Custom image roll over settings
• CSS3 and jQuery powered effects
• Easy setup

Additional Features:

• Include own HTML code
• Make own styles to fit the site
• Possibility to work smoothly on mobile devices
• Infinite loading content (requires PHP5+)

Not Included:

• Images seen in the preview are not included in the download package.