Back to contents

How to create a carousel using Advanced Carousel JetElements widget for Elementor

This tutorial shows how to create and customize the Advanced Carousel widget, one of +50 widgets for Elementor from the JetElements plugin.

The Advanced Carousel widget of JetElements for Elementor allows to add multiple images into the items and display them in the form of a slider with multiple items using pagination or navigation elements.

Advanced Carousel widget

Adding a carousel to the website

Step 1 — Firstly, open the web page, where you need to add a carousel. Click the Edit with Elementor option in order to continue. Then, find the Advanced Carousel widget and drop it into a new section.

Advanced Carousel widget

Step 2 — After that, you need to add the images to the widget. To do so, go to the Content > Slides block and click the Add Item button. Here you can input the title and the description for each picture as well as the external item link.

Slides settings

Step 3 — Consequently, proceed to the Content > Settings block, where you can choose whether the items will be displayed as simple pictures with the titles and descriptions below them, or as banners with the titles and descriptions directly on them. This can be done in the Items Layout block.

Step 4 — To make the carousel more eye-catching, go forward to the Animation Effect block, where you can apply one of the 11 effects. They are Lily, Sadie, Layla, Oscar, Marley, Ruby, Roxy, Bubba, Romeo, Sarah and Chico. Pick the one to your taste.

Animation effect

Step 5 — Afterwards, customize the size in the Image Size dropdown. Make the columns use the equal height, turn on the Equal Columns Height option. Enable the Fluid Columns Width function to allow the columns to have different width depending on the size of the image.

Step 6 — Navigate to the Slides to Show option, where you are able to select the preferable number of slides to display. By the way, if you choose 1, then it will look like a slider, not a carousel! In the Slides to Scroll dropdown pick the number of slides to move left at a time.

Slides to Show option

Step 7 — When it comes to navigation, you have a choice between the Arrows and Dots navigation. You can apply both!

Step 8 — Move on to the Content > Additional Options block. In order to make the items move automatically left, enable the Autoplay option. If you want the autoplay stop when you put a mouse cursor on the item, turn the Pause on Hover option.

Step 9 — Proceed to the Style block, where you are able to customize columns, items, title typography, content typography, arrows, dots, etc.

Style settings

That’s pretty much it! Do you like the result?