Free Elementor Remote Vertical Carousel Slider by Premium Addons

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). 

eHl5Omp n36oSQjd8StAqTTy03KZm2Oi8t2UuvHiGiUx qCQD0MhUrnYzzoraKeji4O2TabN0hOzJhwa11ebyRdpIC8tDj1GoRrM1zylUJ20wJWAq re5nh8BqGqM2gZtuKQZ2e
afjyliItNRp7Qde7XTRQ76xS1MyGk 8MC4temdH2wbBhymQ9 a lSE SSnm1KdKdEMyBFCNhyzbu8xnju79NxqO3QD8yCUgN1FSwO8pT39qzuNWZLpmXK hm5RCsocQImJg33kmF

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.

FK6LWHeaH2qHP2eEXLebuF5AKvg0Ospl4gg5tX8t3FRLW49XwRJAecRUf0HNgsLgo C9ADJ3WTvziKeUE IJMSGeOZkhVYe p0GwKhDP7tvZJz hfJDhAg 8N5tq1zR0NCdNUBPg

When your page opens up with Elementor, click the settings icon at the bottom then change Page Layout to Elementor Canvas (00:58)

t9rR5endqdV0DAYuNABieG1hRsF8jofbRwZMgQ0cMgkP2aN5IFLfT3R14ssUND0ac58pxVL PiGJH 7K 21h0m1N9ZRY30D2QJ41 wjQ28cnU7VPcWLn4oOP19lYnFUue 9rW4Ft

Create a new 2 column section. Select your new section and under Edit Section > Layout > Columns Gap, set it to No Gap. 

S8qGpExA8Fk8N9L5Y6j4Ei11KgJTsfqz7ezFpXvYPyM0dbWFLVj0ttO0N7jKoEHUUCUriOK 3OJw34bSDLfGyG8LbUOH8ENLSuNVCq9VHTN sPZ3cugz3OTdYI5SCLGnzUmB E91

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)

BINHWZBbn4WB8 QdT9G mUzvYAuvCBWHMNRT2hs2KEZ VzOtnC P3AAIzEVpRzrcNkf6PCfoHha04CIBkrxwWtKLJyU71pgwjm2RwNElhDSM9tGkgq9hYVhPEuX9

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).

5uvbHg6Jh4 BSXdvU 4A9cd 5jWqV7WI9IP0ZiUAhV70txvFYyDod 9QPx5Y5PfysD5EEdB90ZzHB2zV9wlnmKCuHbPcxeN6ylwSLsoYlsZVoCn6l 6DR79dBsqMMmGUMAycByM

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)

683ae1OI PpFGRfYPHDaSJ0NbdkvLoEoAmZfckY2IPp7NPIPlAsixcA 4 DFZ33vIwkyMZ cVueEuIJ6pD9YNkz SMbelyKycN1fWXVj4FMFSvhSteIWIGCW9jPI2tBIWSkdtXgH

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).

kWAJt6B9nhk3ObaT0aOOxbbkjF6lrOuvQGbyceCwqO8rQtJp n3zQ hWq6E5FsIOuZAz5cIQgjEEVsymTacLkJdJr ws4WpTjFL3qULDoLlcCyStZISTKcdVazl5BJqeHiYTzth6

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.

5py7AriuW7huKspsoC4grKPc8cLV6hNjM PXvVoRu9AlDP2LrfRYD7dHSycGoFNntuH5Ghe4WBDBiLlUre6t2d64fYQhuEVhOSx73a4ndBv4fKmVoLHjppTT eSn5R0vNLqwdPV6

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).

LWVxeiRnw07QqK7Akt0ObN0U9pFHInojRD8XUWeiuiVkwpgqgKMGDQ18dDzb seWhvTbqflMrg q3M3NrErrxDjF7 w5JhA8s5 irUTnvIaLcnuij ooRQS10CLz Zak 2SojWLi

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.

pSM lg0IxxlzcYC04

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)

uWpg9jZtly9 VJKp5vMaqQBozK3dgky1mkJIfWLQAw669TgP0ZFRN50hzNk1aOKGX7Vicz5qX4 YnggnpFQ3M Z0reJipizR9KefSA7z0hRQ5FhGzAj69xJhszs7QTVe7Cp9RqZ

Assign Custom Navigation to your Carousel Slides

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).

f6stPCdNQG0 icwt6mZOS7JXPaN WtKuBTc29JH7Sr4O6ggeS AJo2S08fnGNMt

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)

Elementor Remote Vertical Carousel Slider

Carousel Slider Responsive Settings

Go to the Responsive Mode (11:28).dmwXcmyTZDK6TGiZyxCLWbQb973bXb3mg

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)

WS 8WX5gbeiQkvt4MZH 615iEO7W495BjQbFCfHzhn4dYq NgohXcSUUxWH00RQqqa6uUYEdjDypj3B0FA4KAudWrsNUCNmoYu4LmOIdiMaP nBdv72n3sR4j7MUjMpGJV dBU3I

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).

27PQyDP2XpQtYrBqXMhnEZ3n2SQ6PaiIJqbRxhxUUBJ87oaGmZnsr7nqAsUmr2A9lHEjQ7pZ1u0hH2rTFypUIGkPC0DA NUc6dS4ZioO2tWPMaj7UFbyHVcQIsqt7mzQG z2Tq7M

When you’re done, click the Publish button at the bottom and then preview your final result.

QrsoBRxcuJvTJkutJ3scFs7rmV8SikVH b aFaOPKB2hvjnNZc n9GHCZDpkQlRBlNSJR KX5j DyFIeuOJoy1I8hTmSw8TkRaYc K CQ58pwdqLH6r8sYau4lgMRN8WHdNu0eW4

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.

Also Read. . .

How To Delete A Facebook Group in 2024?

Facebook allows for group interactions through its Facebook groups feature.  Facebook groups are created for specific reasons and attract like-minded people.  At some point, however, you may need to get rid of the group for

Read More »
Newsletter Subscription (EF)
Picture of Hamza
Hamza
Hamza comes from a design background with over 10years of experience in Web and Media design. He enjoys making web design videos on his YouTube channel GoTechUG. He also writes web design articles on this website. In his free time, Hamza loves riding a bicycle, swimming or going hiking.

Leave a Comment

Your email address will not be published. Required fields are marked *