WebGL Lone Slider

The WebGL Lone Slider is a versatile slider container element that provides complete freedom in terms of positioning.

Content Tab


  • Images: The images to use in the slider


Content Items

  • Slide: Add WebGL Lone Slide to the current slider. WebGL Lone Slide elements are optional and you can add any other elements inside of them that you need to accomplish your design. Each WebGL Lone Slide you add will be shown in conjunction with an image based on the order that they are added to the slider ( ie: image 1 and WebGL Lone Slide 1 will be shown together )



  • Previous Icon: Icon to use for navigating to the previous slide
  • Next Icon: Icon to use for navigating to the next slide


Design Tab


  • Width: Slider Width
  • Height: Slider Height



  • Width: Image width
  • Height: Image height
  • Position: The image position within the slider


Content Items Container

  • Width: The container width for the WebGL Lone Slides
  • Height: The container height for the WebGL Lone Slides
  • Position: The container position for the WebGL Lone Slides within the slider
  • Background: Background settings for the container
  • Effect: CSS Effects like filter, mix-blend-mode etc for the container
  • Padding: Padding for the container



  • Previous Icon: Styling and position of the previous icon
  • Next Icon: Styling and position of the next icon


Slider Effects

  • Transition: The transition effect applied to the images
  • Enable Distortion: Enable a distortion effect
  • Speed: The overall speed factor for the transition of the images and the WebGL lone slides ( if they exist )


Disable on Touch Devices

  • Enabled: Disable loading the element on devices with touch capability