Slider Options

General slider options

Name of the slider. Save the slider after your input. You will be redirected to manage the 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-out 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.

responsiveUnder
px

0 (disabled)

Turns on responsiveness under a specified value of width. Useful on full width sliders. If using this, the normal responsive property should be set to false!

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.

Close