The Remote Fraction widget can be used on the Developed by Swiper carousel or slider widget to work as an additional navigation that you can customize separately and it’s completely separated from the slider/carousel widget body.
Let us show you how to configure it.
Inserting a Slider widget first
As a remote widget, we first need to have a Developed by Swiper slider/carousel widget within the page and then link it up with the remote widget.
So, go ahead and open the page you want to use it on in Elementor, and then drag and drop the Mercury Slider widget (for example) into that page. Please note that you need both Elementor and Prime Slider installed before using this widget.
After Inserting the Mercury Slider, you can go for customizations or leave it as it is and move to the next step.
Set CSS ID
Go to Advanced > CSS ID on the Mercury Slider and set a CSS ID name like EX: ‘Remote’ as seen in the image above. Please copy the CSS ID to use it later on.
Insert The Remote Fraction Widget
Now, search and find the Remote Fraction widget on the widget menu in Elementor editor and then drop it on the Page where you want to work with. Although we dropped it right below the slider widget, you can place the remote in any place within the page and it will work just fine.
After inserting the widget, you would need to enter a CSS ID in the Remote Fraction Carousel CSS ID field from the options.
Now, enter the same CSS ID that you set on the Mercury slider, just copy and paste it. After Inserting the Remote Carousel ID and the remote widget will be linked with the slider and start to work.
Let’s Work With The Content Tab
Remote Fraction Section Customizations
Go to Content > Remote Fraction
You have already configured the Remote Carousel ID field for the widget. Without inserting the Carousel Id, Remote Fraction will not function. The Alignment option here works on the total count part and the Digit Pad here lets you select a 2-digit format, 3-digit format, or format as you want.
For example, we selected a 2-digit format and it’s showing the fraction like this in the image.
Work With Style Tab
Customize Of The Remote Fraction Section
Go to Style > Remote Fraction.
In this section, you can set the Alignment for the fraction within the container and adjust the Spacing between the digits and divider. Here you can also change the Current Fraction Color, Text Shadow, And Typography as your demand.
Then, you can switch to the Total subsection and also change the Total Fraction Color, Text Shadow, and Typography as your need.
Separator Customization
Go to Style > Separator
In this section, you can change the Separator Color and its Size to match your design.
All done! You have successfully customized the Remote Fraction widget on your website.
Feel free to check out the demo page.
Thanks for staying with us.
