Multi Builder Elements, Multi Theme and Website Builder
3 minutes read

Slider Block

Slider Block options:

  • Block position – set the block position to left, center or right. This option is available at the top block options panel.
  • Title – add a title to your slider.
  • Infinite – choose whether to display your slides as an infinite loop or to end at the last one.
  • Center – display your slides with a centered view with partial previous/next slides.
  • Center padding – you can add left and right padding to your slider when it’s in center mode. The more padding you add, the smaller your slides get. For center padding to work correctly, its value should be bigger than gutter size value. Use any CSS-compatible padding value.
  • Center slide content – use this option to vertically align your slides’ content to the center.
  • Animation duration – set your slider’s animation speed in miliseconds.
  • Slides to show – set a number of slides to show at a time.
  • Slides to scroll – set a number of slides to scroll with each click.
  • Gutter size – set the size of the space between slides.
  • Navigation dots – show or hide dots navigation. Alternatively, you can show them on mouse hover.
  • Navigation dots position – set dots position to inside or outside.
  • Navigation dots horizontal position – set dots horizontal position to center, left or right.
  • Navigation arrows – show or hide arrows navigation. Alternatively, you can show them on mouse hover.
  • Navigation arrows position – set arrows position to outside, inside, or top.
  • Hide arrows on mobile – you can choose to hide slider arrows on mobile devices and swipe to change the slides.
  • Navigation arrows icon – choose the type of your slider’s arrows from a chevron or an arrow in a circle.
  • Autoplay – choose whether to enable slider autoplay.
  • Autoplay speed [milliseconds] – set autoplay speed in milliseconds.
  • Fade – you can change the default animation type from sliding to fading.
  • Max width – set the maximum block width.
  • Top margin – set the block top margin. Use any CSS-compatible margin value.
  • Bottom margin – set the block bottom margin. Use any CSS-compatible margin value.
  • Full width – set your slider to full page width. This option works with a wide, no sidebar page layout.
  • Title style – set the title style from Heading 1 to Heading 10 or choose the default setting from the Customizer.
  • Arrows color – set arrows color.
  • Arrows hover color – set arrows hover color.
  • Arrows opacity – set the arrows opacity percent. Use values from 0 to 1, for example 0.5
  • Arrows hover opacity – set the arrows opacity on hover. Use values from 0 to 1, for example 0.5
  • Border – set your slider’s borders to vertical, horizontal, both, or disable borders.
  • Border width – set the slider’s borders width in pixels.
  • Border color – set the slider’s borders color.
  • Class – add a custom CSS class to your slider.
  • ID – add a custom CSS ID to your slider.
  • Style – add an inline CSS style to your slider.

Slide block options

After doing that, insert a single Slide Block for each slide you’d like to add. Customize it with the following options:

  • Class – add a custom CSS class to your slider.
  • ID – add a custom CSS ID to your slider.
  • Style – add an inline CSS style to your slider.

You can add any content or any other block to your slide.