General slider options



Name of this slider



  • Basic
  • Navigation
  • Timings & effects
  • Responsive
  • Background
width
number (in pixels like 1280px or in percent like 100%). Default: 1280px
The width of the slider. For best results set this to the width of your slide image width's and use the slider with the option "responsive (default on)".
height
number (in pixels like 720px). Default: 720px
The height of the slider. For best results set this to the height of your slide image height's and use the slider with the option "responsive (default on)".
firstLayer
number (positive integer) or 'random'. Default: 1
LayerSlider will begin with this layer. Use the word 'random' to start with a random layer.
autoPlayVideos
on or off. Default: on
If on, slider will autoplay youtube / vimeo videos - you can use it with autoPauseSlideshow.
autoPauseSlideshow
'auto', true or false. Default: 'auto'
auto, on or off. 'auto' means, if autoPlayVideos is set to on, slideshow will stop UNTIL the video is playing and after that it continues. True means slideshow will stop and it won't continue after video is played.
youtubePreview
Default: maxresdefault.jpg
Default thumbnail picture of YouTube videos. Can be 'maxresdefault.jpg', 'hqdefault.jpg', 'mqdefault.jpg' or 'default.jpg'. Note, that 'maxresdefault.jpg' os not available to all (not HD) videos.
autoStart
on or off. Default: on
If on, slideshow will automatically start after loading the page.
twoWaySlideshow
on or off. Default: off
If on, slideshow will go backwards if you click the prev button.
randomSlideshow
on or off. Default: off
If on, LayerSlider will change to a random layer instead of changing to the next / prev layer. Note that 'loops' feature won't work with randomSlideshow!
imgPreload
on or off. Default: on
Image preload. Preloads all images and background-images of the next layer.
pauseOnHover
on or off. Default: on
If on, SlideShow will pause when you move the mouse pointer over the LayerSlider container.
loops
number (0 or a positive integer). Default: 0
Number of loops if autoStart set true (0 means infinite).
forceLoopNum
on or off. Default: on
If true, the slider will always stop at the given number of loops even if the user restarts the slideshow.
showBarTimer
on or off. Default: off
You can show or hide the bar timer.
showCircleTimer
on or off. Default: on
You can show or hide the circle timer.
skin
name_of_the_skin Default: glass
You can change the skin of the Slider. You can choose one of the pre-installed skin on the list or type a own skin name in. The skin name represents the folder where the skin files are located. If you choose a own skin you have set 'skinsPath' manually!

Pre-installed skins:
  • borderlessdark
  • borderlessdark3d
  • borderlesslight
  • borderlesslight3d
  • carousel
  • darkskin
  • defaultskin
  • fullwidth
  • fullwidthdark
  • glass
  • lightskin
  • minimal
  • noskin
  • v5
skinsPath
path_of_the_skins_folder. Default: internal
You can change the default path of the skins folder. Example: /fileadmin/templates/my_awsome_skin
keybNav
on or off. Default: on
Keyboard navigation. You can navigate with the left and right arrow keys.
navPrevNext
on or off. Default: on
If off, Prev and Next buttons will be invisible.
navStartStop
on or off. Default: on
If off, Start and Stop buttons will be invisible.
navButtons
on or off. Default: on
If off, slide buttons will be invisible.
hoverPrevNext
on or off. Default: on
If on, the prev and next buttons will be shown only if you move your mouse over the slider.
hoverBottomNav
on or off. Default: off
If on, the bottom navigation controls (with also thumbnails) will be shown only if you move your mouse over the slider.
thumbnailNavigation
'hover', 'always' or 'disabled'. Default: 'hover'
Thumbnail navigation mode. Can be 'disabled', 'hover', 'always'. Note, that 'hover' setting needs navButtons true!
tnWidth
number (in pixels, a positive integer). Default: 100
Width of the thumbnails (in pixels).
tnHeight
number (in pixels, a positive integer). Default: 60
Height of the thumbnails (in pixels).
tnContainerWidth
width. Default: 60%
Default width of the thumbnail container, for example: 100 (pixels) or 60%
tnActiveOpacity
number (0 or a positive integer lower, than 100). Default: 35
Opacity of the active thumbnail (0-100).
tnInactiveOpacity
number (0 or a positive integer lower, than 100). Default: 100
Opacity of the inactive thumbnail (0-100).
slideDirection
'left', 'right', 'top', 'bottom' or 'fade' *. Default: right
Slide direction. New layers sliding FROM(!) this direction. * From version 1.6 you can use the fade parameter if you want to fade in / out a sublayer instead of sliding. Note, that fade is working ONLY on sublayers but not on layers so if you want to fade in / out a sublayer (instead of sliding), you have to add the slidedirection or the slideoutdirection property to that sublayer and you cannot use fade as a global property!
slideDelay
number (millisecs). Default: 4000
Time before the next slide will be loading.
durationIn
number (millisecs). Default: 1000
Duration of the slide-in animation.
durationOut
number (millisecs). Default: 1000
Duration of the slide-out animation.
delayIn
number (millisecs). Default: 0
Delay time of the slide-in animation.
delayOut
number (millisecs). Default: 0
Delay time of the slide-out animation.
easingIn
easing (all easing types of jQuery UI Effects Core can be used) Default: easeInOutQuint
Easing (type of transition) of the slide-in animation.
You can click here to view all easing types: Easings jQuery UI API
easingOut
easing (all easing types of jQuery UI Effects Core can be used) Default: easeInOutQuint
Easing (type of transition) of the slide-in animation.
You can click here to view all easing types: Easings jQuery UI API
responsive
on or off. Default: on
If set, the slider will make a responsive width container.
touchNav
on or off. Default: on
Touch-control (on mobile devices)
globalBGColor
CSS color methods. Default: transparent
Background color of LayerSlider. You can use all CSS methods, like hexa colors, rgb(r,g,b) method, color names, etc. Note, that background sublayers are covering the background.
globalBGImage
URL of the background image. Default: false
Background image of LayerSlider. This will be a fixed background image of LayerSlider by default. Note, that background sublayers are covering the global background image.