Add Slider or Slideset using Sliper for Elementor

The Sliper is a powerful responsive slider WordPress plugin for Elementor that can help to implement all your creative ideas. Flexible settings and an intuitive interface will help you easily create beautiful slides without a single line of code. For content, you can choose a custom image/text for or use WordPress posts and even Woocommerce products as the source.

For further work, you need the Elementor to be installed on your site. You can download from wordpress.org

Open or create a page using Elementor to start using the Sliper Elementor widget. You will find the widget at the end of the general section.

Sliper Elementor widget

Drag it into the editor to start customizing. In the left pane of the editors, you can customize the widget to the style of your site. Each of the tabs presented a specific group of settings:

Content Tab

On the Content tab of the Sliper Elementor widget, you can manage the general slider settings and each slide content.

General

General slider settings, where you can choose the content source, display type, number of slides per page, and other settings.

Source

Select which type of source you want to use for the info box:

  • Custom – an option allows you to create custom slides with the necessary content for each of them. Once you select this source, a new “Slides” section with settings is displayed on the Content tab, where you can add and configure the required number of elements.
  • Posts – an option that allows you to display posts of a certain category as the slides of the slider. To do this, you need to create posts, fill in the appropriate fields and assign them to a specific category. After that, select the category in the current settings.
  • WooCommerce – an option that allows you to display WooCommerce products of a certain category as the slides of the slider. To do this, you need to create products, fill in the appropriate fields and assign them to a specific category. After that, select the category in the current settings.

Type

The option allows you to choose different display styles for the slides:

  • Overlay – an option allows content to be displayed over the image.
  • Card – an option allows content to be displayed below the image as a regular card.

Link type

The option allows you to apply a link to a specific box element. The available types are Box, Title, Button. Select Note to disable the link.

Initial Slide

Select which slider will be displayed first after the page load.

Slides align

Align slides in relation to slide

Display slides

Specify the number of slides you want to display on one screen. Set slide width less than 100%.

Slides shift

Specify the horizontal offset of the slides.

Slide transition

Select one of the available animations to be used when switching slides: Rice, Slide Down, Slide Up, Bounce, Flip X, Flip Y, Jello, Zoom, Fade.

RTL

The toggle to enable/disable right-to-left layout.

Disable on Desktop

The toggle to enable/disable the slide on the desktop. Instead, each slide will be displayed as regular images.

Disable on Tablet

The toggle to enable/disable the slide on the tablet. Instead, each slide will be displayed as regular images.

Disable on Mobile

The toggle to enable/disable the slide on the mobile. Instead, each slide will be displayed as regular images.

Navigation

The section where you can select types of navigation, play mode, and other settings.

Auto play

The toggle to enable/disable the autoplay feature for the slider. It also allows for defining the transition duration.

Pause on hover

The toggle to enable/disable the pause for autoplay when hovering a slider.

Infinite scrolling

The toggle to enable/disable the loop feature to scroll the slider endlessly.

Navigation arrows

The toggle to enable/disable the navigation arrows.

Navigation dots

The toggle to enable/disable the navigation dots.

Keyboard navigation

The toggle to enable/disable the ability to navigate using keyboard keys.

Draggable

The toggle to enable/disable dragging and flicking feature.

Attraction

Attracts the position of the slider to the selected cell. Higher attraction makes the slider move faster.

Friction

Specify the movement of the slider. Higher friction makes the slider feel stickier. Lower friction makes the slider feel looser.

Layout

The section of the Sliper for Elementor where all elements of the slider layout can be added, configured and ordered.

To add a new box element, click “Add Item” and select one of the available item types:  Image, Title, Description, Price, Category, Button.

Layout item settings

Slides

The section is available when choosing Custom as Source of the Sliper Elementor. Here you can add the required number of slides with the custom content.

Custom content settings of the Sliper for Elementor
Content
  • Background type – the setting changes the background of the current block. You can choose a color, gradient, or background image.
  • Title – a field to enter the title of the slide.
  • Description – a text area to enter the description of the slide.
  • Button Text – enter the text for the button.
  • Link – enter the button link.
  • Slide Id – specify the unique ID for each slide.
Style
  • Custom – the toggle to enable/disable custom style for each slide. These styles take priority over general slide styles.

When the option is enabled such settings are available:

  • Horizontal Position – specify the content alignment horizontally.
  • Vertical Position – specify the content alignment vertically.
  • Text Align – specify the text alignment of the slide content.
  • Content Color – select the color and opacity of the content using the color picker.
  • Text Shadow – create a text shadow and adjust it according to your needs specifying color, blur, horizontal and vertical shift.
  • Background Type – the setting changes the background of the current block. You can choose a color, gradient, or background image.

Style tab

On the styles tab of the Sliper Elementor widget, you can configure everything related to the visual style of elements: colors, typography, backgrounds, borders, and more.

Slider

The section of the general style settings for slider block.

  • Width – specify the width of the slider in different units(px, %).
  • Height – specify the height of the slider in different units( px, %, VH).
  • Padding – the setting allows managing the padding of the elements in different units(px, em, %) for desktops, tablets, or phones.
  • Border Type – select one of the available border types (solid, double, dotted, dashed, groove) for the current box and adjust the width, color, and radius according to your needs. Pick “None” to remove the border.
  • Border Radius – specify the border radius for the slider.

Slide

The section of general styles for slides. The settings of this block have a lower priority over the individual style settings of each of the slides.

  • Width – specify the width of each slide in different units(px, %).
  • Padding – the setting allows managing the padding of the slide in different units(px, em, %) for desktops, tablets, or phones.
  • Background Type – the setting changes the background of the current block. You can choose a color, gradient, or background image.
  • Border Type – select one of the available border types (solid, double, dotted, dashed, groove) for the current box and adjust the width, color, and radius according to your needs. Pick “None” to remove the border.
  • Border Radius – specify the border radius for slides.
  • CSS filter – adds various CSS filters for the photo as Blur, Brightness, Contrast, Saturation, Hue.

Overlay

The section with style settings that are applied when you select the Overlay slider display type in the Content tab.

  • Horizontal Position – specify the content alignment horizontally for different devices.
  • Vertical Position – specify the content alignment vertically for different devices.
  • Alignment – specify the content alignment of the slide content.
  • Margin – the setting allows managing the margin of the block in different units(px, em, %) for desktops, tablets, or phones.
  • Padding – the setting allows managing the padding of the block in different units(px, em, %) for desktops, tablets, or phones.
  • Background Type – the setting changes the background of the current block. You can choose a color, gradient, or background image.
  • Border Type – select one of the available border types (solid, double, dotted, dashed, groove) for the current box and adjust the width, color, and radius according to your needs. Pick “None” to remove the border.
  • Border Radius – specify the border radius for the block.
  • CSS filter – adds various CSS filters for the photo as Blur, Brightness, Contrast, Saturation, Hue.

Title/Description

The sections include styles settings for text and text block.

  • HTML tag(for Title only) – select one of the available tags from the list for the header text. Depending on the selected tag, the text display style will be changed. These tags also help to make your page more SEO friendly.
  • Width – specify the width of the current element in different units(px, %) for all devices or separately for desktops, tablets, or mobiles.
  • Margin – the setting allows managing the margin of the current element in different units(px, %) for desktop, tablets, or phones.
  • Padding – the setting allows managing the padding of the current element in different units(px, em, %) for desktop, tablets, or phones.
  • Color– specify the font color and opacity for the text of the current block using the color picker.
  • Typography – this group of settings controls everything about typography: font-size, font-weight, line-height, decoration, and other parameters.
  • Text Shadow – the setting creates a shadow from the text and it can be adjusted according to your needs specifying color, blur, horizontal, and vertical shift.
  • Alignment – manage the current block alignment (left, center, right) for all devices or separately for desktops, tablets, or mobiles.
  • Background Type – the setting changes the background of the current block. You can choose a color, gradient, or background image.
  • Border Type – select one of the available border types (solid, double, dotted, dashed, groove) for the current box and adjust the width, color, and radius according to your needs. Pick “None” to remove the border.
  • Box Shadow – the setting creates a shadow from the current block and it can be adjusted according to your needs specifying color, blur, horizontal and vertical shift.

Background

The section with style settings of the slider background.

  • Width – specify the width of the slider in different units(px, %).
  • Height – specify the height of the slider in different units( px, %, VH).
  • Margin – the setting allows managing the margin of the elements in different units(px, em, %) for desktops, tablets, or phones.
  • Padding – the setting allows managing the padding of the elements in different units(px, em, %) for desktops, tablets, or phones.
  • Border Type – select one of the available border types (solid, double, dotted, dashed, groove) for the current box and adjust the width, color, and radius according to your needs. Pick “None” to remove the border.
  • Border Radius – specify the border radius for the slider.
  • Box Shadow – the setting creates a shadow from the current block and it can be adjusted according to your needs specifying color, blur, horizontal and vertical shift.
  • CSS filter – adds various CSS filters for the photo as Blur, Brightness, Contrast, Saturation, Hue.

Button

The section with flexible style settings of the button and text in the normal or hover state.

  • Width – specify the width of the current element in different units(px, %) for all devices or separately for desktops, tablets, or mobiles.
  • Margin – the setting allows managing the margin of the current element in different units(px, %) for desktop, tablets, or phones.
  • Padding – the setting allows managing the padding of the current element in different units(px, em, %) for desktop, tablets, or phones.
  • Typography – this group of settings controls everything about typography: font-size, font-weight, line-height, decoration, and other parameters.
  • Text Shadow – the setting creates a shadow from the text and it can be adjusted according to your needs specifying color, blur, horizontal, and vertical shift.
  • Alignment – manage the current block alignment (left, center, right) for all devices or separately for desktops, tablets, or mobiles.
  • Border Radiusspecify the border radius for the slider.
normal/hover
  • Color– specify the font color and opacity for the text of the current block using the color picker.
  • Background Type – the setting changes the background of the current block. You can choose a color, gradient, or background image.
  • Border Type – select one of the available border types (solid, double, dotted, dashed, groove) for the current box and adjust the width, color, and radius according to your needs. Pick “None” to remove the border.
  • Box Shadow – the setting creates a shadow from the current block and it can be adjusted according to your needs specifying color, blur, horizontal and vertical shift.

Navigation

The section with navigation style settings of the Sliper Elementor.

Arrows
  • Position – select the position of the navigation arrows on the slider for different devices.
  • Size – select the size of the navigation arrows on the slider for different devices.
  • Border Radius – specify the border radius for the button.
  • Color(normal/hover)– specify the font color and opacity for the text of the button using the color picker.
  • Background Type(normal/hover) – the setting changes the background of the current block. You can choose a color, gradient, or background image.
Dots
  • Position – select the position of the navigation dots on the slider for different devices.
  • Size – select the size of the navigation dots on the slider for different devices.
  • Opacity – specify the opacity of the navigation dots for different devices.
  • Color– specify the font color and opacity for the text of the button using the color picker.

Advanced Tab

The settings in the advanced tab Synopter widget allow you to flexibly configure everything that relates to the design of the plug-in wrapper. The settings on this tab are entirely similar to the native Elementor widgets and will be convenient for experienced users of the Elementor. Learn more about Advanced Tab settings from Elmentor’s official documentation.

Save changes

Do not forget to save changes after completing the widget setup. To do this, click on the Update button at the bottom of the page.

Update page in the Elementor
Update page in the Elementor

Hosting for Elementor websites

Fast and reliable hosting is significant for any WordPress site. We recommend all our customers use SiteGround WordPress Hosting. Many unique settings and features make this hosting the number 1 for WordPress: Free Website Transfer, Staging Tools, Free SSL, CDN, and much more for 3.95/mo.

Was this article helpful to you?