In this tutorial, I’ll show you how to create a free Elementor remote vertical carousel slider using the Premium Addons carousel widget. We’ll use a text editor widget as our custom navigation selector. The templates in our premium carousel will display once your website visitor clicks on the text widget with the corresponding custom selector and CSS ID.
Note: the digits in brackets e.g. (00:02) indicate the minutes of that exact explanation in the video so you can easily jump to that section and follow along.
Video: Elementor Remote Vertical Carousel Slider Tutorial
What You’ll Need to Create a Vertical Carousel Slider
Premium Addons for Elementor; this is where you’ll find the premium carousel widget. To install the premium addons plugin, go to your Plugins area on your dashboard, search for premium addons for elementor the install and activate it.
With your premium addons for elementor installed, back on your menu you’ll be able to see the premium addons item, go to widgets and addons (01:52), then make sure your carousel is enabled (in green), (01:58).Â
To Read: 4 Ways To Create an Elementor Image Accordion with Premium Addons
Using The Premium Carousel Widget
In your dashboard, go to Pages > Add New (00:44). In the next window give your page a name (Vertical Slider in my case), then click the Edit with Elementor button.
When your page opens up with Elementor, click the settings icon at the bottom then change Page Layout to Elementor Canvas (00:58)
Create a new 2 column section. Select your new section and under Edit Section > Layout > Columns Gap, set it to No Gap.
Select the first column and under Layout give it Column Width of 30%, then 70% for the second column where the carousel is going to be.
Go to the Widgets area on the left and search for the premium carousel widget then drag it to your second column (01:33)
After adding your carousel widget into your second column, go to your first column to add content that you’ll use to navigate the carousel slides.
In your Widgets area, search for the Text Editor widget and drag it to the first column (02:22).
Select your text editor and under Content, name it 1. iWatch White
Select the text widget, right-click on it and copy it (duplicate it), twice.
Under Content give them 2. iWatch Black and 3. iWatch Gold (02:41)
Select the first widget and under Style, set Text Color to black, leave everything else on default. Select the second text widget, under Style, give it Text Color white. Then select the last widget and give it white as well.
Select the first widget and go to Advanced, under Padding, give it 10 pixels on all sides. Do the same for the second and last widget.
Select the first widget again, under Advanced > Background Type, give it color white. On the Hover option, choose Gradient for Background Type, then for the gradient color give it white and grey, and down on Angle give it 90.
Also Read: How to Create an Elementor Vertical Scroll Section with Premium Addons
Under Border, give it Border Radius of 35 pixels on all sides. This will give it rounded corners.
Select the second widget, under Advanced > Background Type, give it background color white. Onto the Hover option, set the first hover color to grey and the Second Color to black, and Angle of 90. Then a Border Radius of 35 pixels on all sides.
For the third widget, under Advanced > Background Type, give it gold and on Hover set the first gradient color to gold and the second color to grey. Give it Angle of 280 and Border Radius of 35 pixels.
When you’re done setting this up, save it as a draft and then preview (05:12).
Using Elementor Templates in A Carousel Widget
First, you need to create the templates to use in your carousel.
To do this:
Add a new 1 column section, drag an image widget to your section from your Widgets area. Select the image widget and under Content, choose the iWatch White image from your library. Select the column and under Style, give it white for Background color. Select the section next and under Layout, set Column Gap to no gap. Right-click the section and save it as a template (06:29), give it a name (iWatch White), and save.
Select the column again and go to Style > Background Color, give it black. Select the image widget and replace the iWatch White image with the iWatch Black image. Right-click on the section and save as a template, name it and save.
Repeat this same process and create a template for iWatch Gold.
After creating your templates you’ll be able to echo them in the carousel widget.
Select the carousel widget, under Edit Premium Carousel > Content > Content Type, set it to Repeater.
On the Templates option, go to the Add Item option to select the templates to add to your carousel. When you click on Add Item, go to Content and select iWatch White, add another item, and select iWatch Black on Content, then add another and select iWatch Gold (05:53).
To Read: 15 Fun Elementor Features You Don’t Know Exist
Add Slide Templates To The Carousel Widget
Select the carousel widget, go to the Dots option and make sure it’s enabled, on Position set it to Below the Slides, set the Vertical Offset to 10 pixels, and then enable the Ripple Effect option (07:59). Disable the Arrows option. Set the Type to vertical instead of horizontal.
Under Slides Settings, disable the Infinite Loop and Autoplay Slides options.
With the Premium Carousel still selected, go to Style, under Navigation Dots, on the Icons option choose an icon shape, then on Size set it to 60 pixels, set the Color to purple and Active Color to blue (08:31)
Now we need to set up the slides so that when someone clicks on for example the black iWatch, the correspondent template shows up.
First, select the carousel and go to Content, go to Templates, and select iWacth White, under Custom Navigation Element Selector, put a hashtag and ‘iwhite’ (#iwhite) (09:08).
Select the #iwhite selector you just typed, go to the iwatch white widget and select it, then under Advanced go to CSS ID and paste it, but remove the hashtag (#).
Repeat these steps for the other 2 templates:
Select carousel, go to Templates, and select iwatch black / iwatch gold, under Custom Navigation Element Selector type #iblack / #igold.
Select the widget, under Advanced, go to CSS ID, and assign iblack / igold, without #.
Back to your Editor, select the column with the carousel, go to Advanced and under Margins, unlink the values then add -2pixels on the left, save the changes, and preview (11:26)
Carousel Slider Responsive Settings
Go to the Responsive Mode (11:28).
Select the Tablet;
On the second column, under Layout reduce the Column Width to 60% and set the first column to 40%.
Select the individual widgets and go to Style > Typography, set the Size to 12 pixels.
Select the column and under Layout set Widget Space to 10 pixels.
Select the carousel widget column and under Advanced > Padding, give it 20 pixels on the Top.
Select the whole section next, go to Advanced and give it Padding of 20 pixels on the left.
With the carousel selected, reduce the Navigation Dots Size to 40 pixels.
Select the Mobile device next, under Style > Typography, reduce the text size to 10 pixels for all 3 widgets.
Select each widget and under Advanced, add some padding on the left and right.
With the carousel selected, under Navigation Dots reduce the size of the Icon to 30 pixels.
Select the whole section holding the navigation items and the carousel, go to Advanced > Padding, unlink the values the put 20 pixels on the right and 20 pixels on the left.
Save the draft and preview (13:58)
Add Heading to the Carousel Slider
Back to your editor, add a new 1 column section above the carousel, select the heading, and under Content, insert your Title (14:13).
When you’re done, click the Publish button at the bottom and then preview your final result.
Also Read: How to Make Animated Rainbow Text Effects in Elementor [PRO]
In Conclusion
I hope this tutorial will be useful to you in your website projects.
If you have any comments or questions don’t hesitate to use the comments section below. Subscribe to my youtube channel for more tips and tutorials.
