How to Use Custom Carousel

How to Use Custom Carousel

A carousel is a card list. It is an effective way of displaying web content (image, text, video, etc.). Custom Carousel widget is one of the most easiest widget of all of ours. I’ll include section by section instructions to help you get started.

To Insert Widget

Inserting widget, it is just a matter of drag and dropping. As you see in the screenshot above.


Content Tab

Using the content tab, you’ll be able to make a layout of a particular part (custom carousel) of a website. And in this regard, some handy sections in the tab will assist you a lot.

Slides

This section will allow you to set skins like custom content with default one. In addition, you’ll be able to determine the Layout of the carousel such as Coverflow and Carousel.

After dragging and dropping the widget in a new section, you will get a list group. The list not limited, you can add a new list in the group just clicking on the ADD ITEM button.

Look at the functionality of both of the screens separately.

Skin: Default

Go to the Content tab > Slides > Skin (Default) > Layout (Coverflow)

Carousel Layout

Coverflow Layout

You can edit every single list item(repeater). Simply, hit on the List Item and edit the field found in the List Item. Then, set Type (Image, Video), Image, and Link to (Media File/ Custom URL).

The important thing is that you can also set Image Size(Thumb, Medium, Full, Custom, etc.) and Image Fit(Cover, Contain, Auto).

Especially, here, you can determine the number of content per slide view from the control Slides Per View.

Skin: Elementor

Go to the Content tab > Slides > Skin (Custom Content) > Layout (Coverflow)

You can edit every single list item(repeater). Simply, hit on the List Item and edit the field found in the List Item. Then, set Source location(Editor or Template).


Editor(source)

This time go to the Slides control> hit on the repeater (Item#1) Source (Editor).


Template (source)

Simply, go to the Slides control > hit on the repeater (Item#1) Source (Elementor Template) > Select Template ( like Offcanvas)

Most importantly, here, you also can determine the number of content per slide view from the control Slides Per View.

Note: If you want to work with the Template source location, you have to make a template. And to do that go to the WordPress Dashboard > Templates > Add New > then edit the template with Elementor.

Navigation

This section will allow you what type of navigation you want to display with the carousel and its position. If you select dots, then you’ll be able to make dots/ bullet points dynamic. Here, I’ve shown arrow and fraction.

Simply, go to the Content tab > Navigation > Arrows Position.

Additional Options

In this section, you can manipulate the carousel animation options like Transition Duration, Autoplay, Autopaly, Autoplay Speed, Pause on Hover, Infinite Loop, Centered Slides, Observer, Width.

Just, go to the Content tab > Additional Options.


Style Tab

Now, let’s work with Style Tab. The tab will easily have you style the web content (text, image, video, etc.) of the page you require to design. 

Styling with the Style tab in Elementor will always give you a fantastic experience.

Let’s have a look.

Slides

You will be able to add space between every slide item. Moreover, you have a chance to add background and border color, padding and border radius. Most importantly, you can add shadow mode if your design suit.

Simply, go to the Style tab > Slides.

Navigation

Go to the Style tab > Navigation > and check all the controls. Look at the screenshot.

Video Assist

In Conclusion, though our Custom Carousel contains some tricky parts, hopefully, in the end, you have got the solution. You can stream the video clip above. And to get more ideas about the widget. Visit the demo page.


About Selim Rana

Selim Rana is the Founder of BdThemes - the company behind Element Pack Pro! He is a Software Engineer passionate about WordPress and Elementor.


Enjoy Black Friday Exciting Deals Right Now. Grab The Deals Before The Time Ends!

Day
Hour
Min
Sec