Super Elements

  2. Home
  4. Docs
  6. Super Elements
  8. Super Elements Modules
  10. Super Slider

Super Slider

Super Slider widget is built to leverage Elementor Templates feature. With navigation arrows and dots, speed control, and other features you can use it to create a lot of possible attractive sliders you want.

Super Slider Sample

Content

Display Options

Slides

  • Slides-Here user can input the service details including Background, Content, image, and their style
    • Background↳Color: Here user can select the background color of the slider.
    • Background↳Image: Here user can change the background image of the slider.
    • Background↳Size: Here user can define the position of the background image.
    • Background↳Ken Burns Effect: This effect will give your slider background a beautiful cinematic animation effect.
    • Background↳Zoom Direction: Here user can set in Out direction for the animation.
    • Content↳Sub-Title: Here user will write sub-title for slider
    • Content↳Title: Here user will write the title of the slider
    • Content↳Button: Here user will write the title of button
    • Image↳Image– Here user can select an additional image for the slider
    • Image↳Animation: Here user can select animation for image
    • Style↳Custom: Here user can define style & position for the slider items.
  • Height-Here user can define the height of the slider
  • Slider Control Settings– Here user can enable/disable slider navigation icon/dots, Loop, Autoplay, and change animation, navigation icon.

Style

Slides

  • Padding-Here you can set the preferable custom padding. Fill in the values for the top, bottom, right and left padding.
  • Horizontal Position– Here user can define slider text Horizontal Position Left Center Right
  • Vertical Position– Here user can define slider text vertical Position Up Center Buttom
  • Text Align -Here user can align slider text left center right

TItle

  • Spacing-here user can define bottom space of the item
  • Text-Color↳Classic-Here user can define classic text color of the content
  • Text-Color↳Gradient– Here user can define gradient text color of content
  • Typography – From Here user can select and define the Font family, size, weight, transform, style, decoration, line height, and letter spacing.

Sub Title

  • Spacing-here user can define the bottom space of the item
  • Text-Color-Here user can define the text color of the content
  • Typography – From Here user can select and define the Font family, size, weight, transform, style, decoration, line height, and letter spacing.

Description

  • Spacing-here user can define bottom space of the item
  • Text-Color-Here user can define text color of content
  • Typography – From Here user can select and define the Font family, size, weight, transform, style, decoration, line height, and letter spacing.

Button

  • Size– Here user can define the size of the button: extra small, small, medium, large, extra-large
  • Typography – From Here user can select and define the Font family, size, weight, transform, style, decoration, line height, and letter spacing.
  • Border Width- From here user can define the border width of the button.
  • Border Radius – Here user will specify border Radius.
  • Text-Color-Here user can define the text color of the button.
  • Background Color – Here user can define the background color of the button
  • Border color – Here users can select border color.

Navigation Style

  • Navigation Style – Here user can define navigation position to top left bottom and justify also can change the size of the icon.
  • Border Radius – Here user will specify border Radius.
  • Border Type – Here User can select the type of border.
  • Box Shadow – Here user can add some shadow to the box
  • Color– Here user select the color of the icon
  • Hover Color -Here user can select the icon hover color
  • Background Color – Here user can select the background color
  • Background Hover Color – Here user can select the background hover color
  • Left-Right Nav Padding – Here you can set the preferable custom padding. Fill in the values for the top, bottom, right and left padding.

Dots Style Settings

  • View Dots– Here user can change the style of dots Horizontal and Vertical
  • Dots Color – Here user can select the color of dot’s
  • Dots Hover Color – Here user can select the color of the dot’s hover
  • Dots Top/Left Position- Here user can define the position of dots for left and top.
  • Dots Width/Height – Here User can define the size for dots height and width.
  • Active Dots Width/Height – Here user can define the size of actived Dots