Back to contents

How to create a slider with the JetElements Slider widget for Elementor

This tutorial will guide you through the process of customizing Slider widget, one of the widgets that JetElements plugin offers.

The Slider widget of JetElements will come in handy if you need to attract the visitors’ attention, allowing you to post eye-catching 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.

Slider widget

Creating a slider with the help of the Slider widget

Step 1 — Find the Slider widget and drop it into a new section.

Slider widget

Step 2 — Navigate to the Content > Items block, where you are able to add more pictures to the slider. Here you can also pick an icon, fill in the title, subtitle, and description. You are also allowed to add not only one, but even two link buttons to the slides.

Items block

Step 3 — Move on to the Content > Settings block. In the Image Size section select the preferable size.

Image Size section

Step 4 — If you want to give your visitors a chance to change the slides manually by clicking the navigation arrows, enable the Use Navigation option. You can also decide if you want the arrows to be seen permanently or only when on hover. There is also an alternative Use pagination option, which you can use to show the dots navigation below the slides.

Step 5 — Proceed to the Use autoplay option, which you can use in order for the slides to change automatically with different pace, which you can set in the Autoplay delay section.

Step 6 — There are three variants of what can happen when you put your mouse cursor over the slider. Select none, pause or stop option in the Autoplay On Hover section.

Settings

Step 7 — Go forward to the Display fullScreen button option, where you can enable or disable the fullscreen button, which will appear in the top-right corner of the slider.

Step 8 — Move to the Indicates if the slides will be shuffled option to display the items randomly. And in case you want to exhibit the slides continuously without stopping turn on the Indicates if the slides will be a looped option.

Step 9 — You can apply a fade effect to the slides so that when they automatically change, one fades and another one brightens in turns.

Style settings

Then, you also can turn on the Display thumbnails option to showcase the image miniatures underneath the slides. Customize the thumbnails in the Thumbnail width and height options.

Step 10 — Proceed to the Style block, where you are able to customize the appearance of the slider widget. You can design the Container, the Overlay (determine the opacity, make the opacity value higher to make title and text more distinct), the Navigation, Pagination, Thumbnails, Fullscreen button, Icon, Title, Subtitle, Description and Action Button.

Now a striking slider is showing off your content web page. Enjoy!