How to Use the Slider Widget

This tutorial will guide you through creating and customizing a slider using the Slider widget from JetElements.

Before you start, check the tutorial requirements:

• Elementor (Free version)
• JetElements plugin installed and activated

The Slider widget of JetElements will come in handy if you need to attract the visitors’ attention, allowing you to post pictures with the title, description, and link button on each of them. There are several types of navigation, animation, and lots of customization settings for this widget. Let’s discover them a bit further.

Add the Slider Widget to the Page

Go to WordPress Dashboard > Pages and find the page where you would like to place a slider. It can be a new page; to add it, press the “Add Page” button. 

Open the page in the Elementor page builder. Find the Slider widget and drop it into a new section.

Click on the widget to unfold the Items section. 

First, if you have the JetEngine plugin installed and activated, the first available setting is Use JetEngine query. It allows you to use the JetEngine’s query from Query Builder as the source for the tabs’ content.

Next, the tabs’ settings are presented. By default, there are three items here, and each of them shows a single slider. You can add more sliders by clicking the “Add Item” button and filling it with content. Or, delete the items if not needed.

To customize a slide, click on it and make the necessary changes. Let’s take a closer look at each of the features:

• Image — an image that will be used as a slide background;
• Content Type — a drop-down indicating the type of content displayed in the slide. It has two options and allows you to decide if you want to create the layout and styling from scratch or use a ready-made template;
• Icon — an icon that will be displayed over the title. You can choose it from the library or use an SVG file stored on your PC;
• Title — a title displayed on the slider tab;
• Title HTML Tag — an HTML tag of the entered title that will define its size and importance;
• Subtitle — a subtitle displayed on the slider tab;
• Subtitle HTML Tag — an HTML tag of the entered subtitle that will define its size and importance;
• Description — a description displayed on the slider tab; 
• Use Custom Alignments — a toggle that is deactivated by default. When activated, you can set the custom alignments for each element of the current slide;
• Link on whole slide — a toggle that is deactivated by default. When activated, the whole slide becomes clickable and redirects to the URL specified in the Slide Link field;
• Primary Button URL — a field where the URL of the primary button can be entered;
• Open link in new window — a toggle that is deactivated by default. When activated, the link will be opened in a new tab, when the button is clicked;
• Add nofollow — a toggle that is deactivated by default. When activated, it adds the “nofollow” attribute to the link;
• Primary Button Text — a field for the text displayed on the primary button;
• Secondary Button URL — a field where the URL of the secondary button can be entered. You can place two buttons over the slide. You can also make the link open in a new window and add a “nofollow” attribute to it by enabling a corresponding toggle;
• Secondary Button Text — a field for the text displayed on the secondary button;
• Slide CSS ID — a field that allows adding a CSS ID to the current slide.

Move on to the Settings tab. There is a large number of features to customize here, so let’s go through each of them:

• Slider CSS ID — a field where the CSS ID of the whole slider can be specified;
• Slider Width — a field allowing to set the width of the slider. When set, it will be applied to all the slides of the slider. The width could be set in percent of the slider block width;
• Slider Height —  a field that allows defining the size of the slider. When set, it will be applied to all the slides of the slider. The height has two possible units of measurement, pixels (“px”) and percent of the browser window height (“vh”);
• Dynamic Slide Height for Templates — a toggle that is deactivated by default. When activated, the slide height is automatically adjusted based on the content of template slides;
• Slider Container Width — the text that overlays the picture on the hover is placed in the container. In this option, you can change the container width. It can be set in percent of the Slider Width and pixels;
• Image Resolution — a resolution of the background image;
• Image Scale Mode — a drop-down menu, with the help of which you can choose how the image will be scaled. The “Cover” option means that the image will be scaled to fit the height of the slide. The “Contain” option will fit the picture to the slide’s width and save its original proportions;
• Lazy Load Images — a toggle that is activated by default. If left activated, the slider loads as the user scrolls the page and not when the page is initially opened;
• Content Motion Effect — the field where you can select the motion animation of how the content will appear — moving “Up,” “Down,” “Left,” or “Right”; 
• Use navigation — a toggle that is activated by default. If left activated, the website visitors will be able to manually change the slides by clicking the navigation arrows;
• Fade arrows on hover — a toggle that is deactivated by default. If activated, the arrows will appear only on hover;
• Arrow Icon — the shape of the arrow. It can be taken from the Icon Library or uploaded as an SVG file;
• Use pagination — a toggle that is deactivated by default. If activated, the dots navigation will be shown below the slides;
• Use Fraction pagination — a toggle that is deactivated by default. If activated, the fraction pagination will be shown below the slider. This type of pagination shows the current slide number alongside the total number of slides, formatted like a fraction (e.g., “1 / 7” or “2 / 5”). When activated, the prefix, suffix, and separator can be adjusted; 
• Use autoplay —  a toggle that is activated by default. If left activated, the slides will change automatically at a pace that you can set in the Autoplay delay field;
• Autoplay On Hover — a dropdown field where you can select among three variants of what can happen when you put your mouse cursor over the slider: “None”, “Pause”, or “Stop” option;
• Display fullScreen button — a toggle that is activated by default. If left activated, the fullscreen button will appear in the top-right corner of the slider. The FullScreen Icon can be picked in the Icon Library or downloaded as an SVG file;
• Touch Swipe Effect — a toggle that is activated by default. If left activated, the users can switch between slides by swiping or dragging them with a mouse;

• Indicates if the slides will be shuffled — a toggle that is deactivated by default. If activated, the items will be displayed randomly;
• Indicates if the slides will be looped — a toggle that is activated by default. If left activated, the slides will be shown continuously without stopping;
• Use fade effect? — a toggle that is deactivated by default. When activated, you can apply a fade effect to the slides so that when they automatically change, one fades and another one fades in;
• Between Slides Distance — a field that allows setting the width of the gap between the slides that can be seen when they change each other;
• Slide Duration — a field where the time in ms set defines how quickly the slides will change;
• Display thumbnails — a toggle that is activated by default. If left activated, the image miniatures are displayed underneath the slides. Customize the thumbnails in the Thumbnail width and Thumbnail height options;
• Image Resolution — a resolution of the thumbnail images below the main slide.

Warning

The following, Dynamic Settings, section appears if the JetPlugins Dynamic Data Addon is installed and activated.

In the Dynamic Settings section, you can adjust slides to be filled dynamically. 

Initially, the Enable dynamic data toggle is presented; it is disabled by default. When activated, the following settings become available:

• Source — a field that allows you to define the source of the displayed data: “Post Meta,” “Option,” or “Taxonomy.” If the “Option” is selected, you should first specify the Option name. When specified, for all the Source options, the next settings should be adjusted;
• Repeater field name — a field where you can set the “Repeater” meta field’s name in order to use it as a source for the content in the sliders;
• Image — a field where a “Media” field name that will be used as a source for the background images for slides should be set;
• Is image control — a toggle that can be activated in order to make an image act as a clickable link;
• Icon — a field where the “Iconpicker” meta field’s name should be put;
• Title — a field where the meta field’s name with the title for the slide should be put;
• Subtitle — a field where the meta field’s name with the subtitle for the slide should be put;
• Description — a field where the meta field’s name with the description for the slide should be put;
• Primary Button URL — a field where the meta field’s name with the primary button URL for the slide should be put;
• Primary Button Text — a field where the meta field’s name with the primary button text for the slide should be put;
• Secondary Button URL — a field where the meta field’s name with the secondary button URL for the slide should be put;
• Secondary Button Text — a field where the meta field’s name with the secondary button text for the slide should be put; 
• Link on whole slide — a field where the meta field’s name with the link for the entire slide should be put.

Finally, proceed to the Style block, where you can customize the appearance of the slider widget. When all the settings are done, hit the “Publish” button, and check the result.

Check the Result

Now, open the just-edited page on the front end to see that a slider is now displayed on your web page.

That’s all; now you know how to use and customize the Slider widget from JetElements on your WordPress website.