Home / Widgets

Slider Widget

Unknown Author

Last updated on Nov 22, 2024

The Slider widget allows you to display a series of images, videos, and other media content, such as featured products, new highlights, etc., dynamically and interactively. It typically consists of a horizontal or vertical strip that contains multiple items, with only one item visible at a time.

Adding a Slider Widget

To add a Slider widget:

  1. Go to Visual Editor by selecting Advanced mode from the mode switcher on the Dashboard top panel, or navigate to Dashboard > Channels > Advanced.
  2. Open the Widgets list on the left panel.
  3. Type the widget name in the search bar, or expand the Media grouping and select the Slider widget.
  4. Drag and drop the Slider widget from the list onto the desired crafting area of the Layout Canvas.

Configuring the Slider Widget

Once you have added the Slider widget, click the widget to activate the Property Panel where you can customize its Styles, Content, and Settings according to your preferences.

To configure the Slider widget:

  1. Go to Styles to modify the widget styling features (see Global Styles).

2. Go to Content to modify the widget content:

  • Click + Add Slide to add a slide inside your widget.
  • Click and hold the slide on the left side, then move it to the desired position to reorder the added slides.
  • Click the Dotted Menu and select the corresponding option to rename, duplicate, or delete the slides.

3. Go to Settings to modify the widget settings:

  • Enable/disable Arrows to display/hide the navigation arrows that enable the users to move back and forth between items, giving them control over the displayed content.
  • Enable/disable Pagination to display/hide the pagination that enables users to navigate through different pages of content.
  • Tick Dots/Numbers to indicate how the pagination is presented: dots or numbers.
  • Expand Auto-slide and enable/disable the Auto-slide toggle to activate/deactivate the automatic transition or movement of slides within a slideshow without user interaction.
  • Indicate the time interval between the automatic transition of slides in the Delay field to determine how long each slide remains visible before the widget moves on to the next slide.
  • Expand Transitions and select the transition effect of slides: Horizontal, Vertical, or Fade In.
  • Select the type of easing from the respective drop-down list.
  • Indicate the easing duration.
  • Expand Visibility and modify the visibility of the widget on your website. Select who can view the widget according to the customer’s location, session status, type of used device, browser, language preference, etc. (see Visibility Settings).

Modifying the Slider Widget Elements

Once you have configured the Slider widget, you can modify the corresponding elements inside the Slider widget according to your preferences. This allows you to define the appearance and functionality of the widget on your website.

The following elements are available:

  • Slide allows you to manage the content of slides displayed within a Slider widget (see Modifying the Slide Element).
  • Pagination allows you to modify the style of the Pagination icon on the right side Property Panel (see Global Styles).
  • Pagination Item allows you to modify the style of the pagination item on the right side Property Panel (see Global Styles). You can set the state of the pagination item to define how the pagination is displayed on your website. The following states are available: Active and Inactive.
  • Button allows you to modify the styling features of the navigation arrow:
    1. Click the Button element.
    2. Go to Styles to configure the slide navigation arrow principal styling features (see Global Styles).
  • Expand General and choose how it is displayed on your website (only the label, only the icon, label with left or right icon).
  • Set the mode of the button to define how the navigation arrow is displayed on your website. The following modes are available:
    • Normal: The button is displayed as static actively being interacted with or hovered over.
    • Loading: The button is displayed with a loading effect.

3.  Go to Content.

  • Click Change Icon to add or change the icon of the navigation arrow.
  • Go to General Icons and select the corresponding icon from the list.
  • Go to My Icons and select the corresponding icon from the list uploaded in Media> Vectors.
  • Enter the label text.

Tip:

  • You can access the UI Elements in the Design System. To do so, click the bookmark icon in the upper-right corner of the Property Panel. Select one as a base for Button, or click the plus icon to create a new UI Element and style it according to your preferences.
  • Once you have customized each mode, you can use the Dotted Menu to reset or override Button styles. To do so:
  1. Click the Dotted Menu in the right corner of the Property Panel.
  2. Select Reset Styles to discard the changes made to the widget and restore its default style.
  3. Select Override Styles to update the default style of the base element (font, size, alignment, etc.) and the elements derived from the base one.
  • Icon allows you to add or change the icon of the navigation arrow that best suits your website design.
    1. Click the Icon element.
    2. Go to Styles to configure the principal styling features (see Global Styles).
    3. Go to Content.
  • Click Change Icon to add or change the icon of the navigation arrow.
  • Go to General Icons and select the corresponding icon from the list.
  • Go to My Icons and select the corresponding icon from the list uploaded in Media>Vectors.

Modifying the Slide Element

You can modify the Styles, Content, and Settings of the Slide element according to your preferences.

To do so:

  1. Go to Styles to configure the principal styling features (see Global Styles).
  2. Go to Content to modify the widget property content:
  • Click the corresponding slide and tick Image or Video to add the corresponding media content.
  • If you have selected Image, click + Add Image and select the corresponding image or upload the media content from the computer, free stock (powered by Unsplash), or insert a URL, click Select.
  • Select how the image content is resized and fitted within its container:
    • Cover: The image is scaled to cover the entire container, filling it without any letterboxing.
    • Contain: The image is scaled to fit within the container while maintaining its aspect ratio.
  • If you have selected Video click + New Video and select the corresponding video content or upload the media content from the computer or insert URL, click Select.
  • Click Change Thumbnail to add a video poster and select the corresponding icon or logo or upload the media content from the computer, free stock (powered by Unsplash), or insert the URL and click Select.

3. Go to Settings to modify the widget property settings:

  • Expand Videos and indicate the start time to specify a particular moment within the video content where you want the playback to commence rather than starting from the beginning of the video.
  • Expand Visibility and select who can view the widget property according to the customer’s location, session status, type of used device, browser, language preference, etc. (see Visibility Settings).

 

💡 If you have questions or concerns, contact us directly via the Live Chat box in the lower right corner. Our Support Team will provide you with top-notch quality support 24/7.