SLIDER DOCS

The ultimate FAQ and "good to know" list for Slider.

About the Component

Do not remove the attributes. They are required for the Slider component to work.

Do not remove the attributes added to generated elements. If they are removed, the Solution will stop working.

Do not move the Slider elements outside the instance wrapper.

To keep the app functionality and edit mode working, keep all elements of the Slider component inside the instance element that wraps all Slider elements.

You can't preview the Slider functionality in Webflow Designer. Only on the published website.

The Slider will not function inside Webflow Designer because it requires JavaScript. Publish your project to webflow.io and see the Slider work properly.

You can't preview gaps and slides per view in Webflow Canvas. Only on the published website.

The 'space between the slides' and 'slides per view' are only visible on the published website. There will be not be any space between each slider in Designer.

‍

The Slider solution performs the required calculations to add the correct gaps and slides per view based on your Slider configuration. The gaps are calculated and added on the published page.

You can move Slider elements as long as you keep them inside the instance wrapper.

You can move the navigation arrows and pagination wrapper to other positions. It is required to keep all moved elements inside the instance wrapper.

You can make changes to classes generated by Finsweet Slider.

Finsweet Components doesn't rely on classes to work. You can change, rename, and duplicate classes however you want. You have full control over the class organization and naming convention of your Slider..

You can edit any Slider by selecting the instance wrapper and opening the app.

You can enter "edit mode" for any Component by selecting the component in Webflow Designer and opening Finsweet Components. You can change many options to update your Slider at any point in the development process.

‍

To prevent Component issues, some options are disabled in edit mode. If you need a disabled option, please generate a new Slider.

You can manually copy/paste the Slider Component in Webflow Designer as many times as you want.

You can select any Slider instance wrapper, copy it to clipboard, and paste it inside the same Webflow project.

About styling & interactions

Style and customize the Slider component however you want.

Use the Webflow Style panel to customize your slider elements, such as slides, pagination, and navigation. There are no design limitations for Finsweet Components.

To style the Active Slide, add a combo class is-slide-active to the slide item.

Our solution adds the combo class is-active-slide by default to the active slide on the published website. You can style the is-active-slide class however you want to show the active slide state.

‍

You can optionally change the name of the active slide class in the configure tab.

Change the transition of active states using the native 'transitions' property in the Webflow Style panel.

Add transitions to create smoother changes between slide states. You can get creative here!

You can not add interactions to specific elements inside the slides.

Currently, our solution does not support Webflow interactions to animate specific elements inside the slides in the active state. However, you can achieve this using custom CSS or a creative implementation of the Thumbs and Controller feature.

How Slider technically works

The Slider is built on top of the Swiper.js library

Our slider is built on top of the most powerful and flexible open-source slider library, Swiper.js.

‍

Instead of reinventing the wheel, we chose to build on top of Swiper for its extensive feature set and reliability in creating responsive, touch-enabled sliders. The most capable slider tool is now completely customized for our normal workflow inside Webflow.

Swiper.js uses pixel instead of REMs

Swiper.js relies on pixel measurements for its calculations, rather than using REM units. This design choice ensures precise and consistent behavior across various devices and screen sizes. However, it means that our slider's responsiveness and layout are directly tied to pixel-based measurements, which may affect flexibility when working with REM-based designs. As this is an inherent characteristic of swiper.js, we have no control over this aspect.

About the plans

What will happen to my current subscription for all components?

The special launch offer with the 'all components' subscription is no longer available. Subscribers to this plan will keep the $10 monthly price for all current and future components as long as they maintain the subscription.

‍

How do bulk discounts work?

Bulk discounts apply to Project Lifetime plans only.
Designed for agencies, freelancers, and big projects.
All Components must be purchased in a single checkout to qualify for a bulk purchase discount.
You can purchase any combination of Components to qualify for bulk discount. For example, you can purchase 6 Slider Components, 2 Tabs Components, and 4 Cookie Consent Components to quality for the 10+ Components discount.
You can use purchased Components on any site at any time. Once you assign a domain to a Project Lifetime purchase, that domain is "locked in" for that Component. However, there's no time limit to set the domain. You can choose to assign a domain at any point in the future, and the Component will activate on that domain once it's locked in.
‍

Buy 3-5 Components = 15% discount
Buy 6-9 Components = 25% discount
‍Buy 10+ Components = 30% discount

What if my domain name changes?‍

Monthly/Annual subscriptions:

You can change your domain name at any time in the future while paying for the subscription. If you want to use your subscription with a different domain, go to my.finsweet.com/subscriptions, find your subscription, and change your site domain URL.

Project Lifetime plan:

You can change your domain name at any time in the future, as long as it's for the same project or company. When you're buying Project Lifetime, you're buying the ability to use the Component for the lifetime of the project.

We'll be lenient with domain changes, but will not allow abuse of the pricing model. We will not accept domain name changes that are clearly for different projects.

What is a Project Lifetime plan and who is this for?

Finsweet Components will work on the published page forever after your one-time payment. Purchase "Project Lifetime", set the domain name, and the Component will work on that domain forever — without any further costs or payments. This plan is for:

Anyone who doesn't want to manage a subscription for the website they are building.
Freelancers or agencies who are building websites for client projects. You may not want ongoing payments after a website is delivered. Pay once for the Component, lock it into the domain, and forget about ongoing costs.

Can I cancel my subscription at any time?

Yes, you can cancel your subscription at any time. It's important to understand that all Components created using Finsweet Components will stop working on your production website.

Can I use one subscription for multiple custom domains in my Webflow project?

Yes, the subscription is per Webflow project and is connected to the Webflow project site ID. If you have multiple domains connected to your project, they will all work with a single subscription.

Is there a limit to the number of Component loads on a website?

Monthly/Annual subscription:
Up to 1M views per month. If you want unlimited views, buy a Project Lifetime plan.

Project Lifetime plan:
‍No, there is no limit to the number of loads on a website with the Project Lifetime plan. Both staging and custom domains have unlimited loads per month.

Is there a limit to the number of Components per project?

No, there is no limit to the number of Components you can use in a Webflow project. As long as you have a subscription or Project Lifetime plan for the Components, you can use as many Components as you want.

How can I instruct my client to get a subscription for their project?

In your client's project, go to the Finsweet Components app and click on the 'Get a subscription' button to be redirected to the checkout. Share this link with your client to complete the checkout process.

What happens if my subscription expires?

If your subscription expires, the Components used on your website will stop working. They will resume working when you reactivate your subscription. We will reach out to you many times before 'turning off' Finsweet Components in your project. We will not show a broken Component on your project. Instead, we will completely remove the entire Component from the page.

Do I need a paid plan to use the Finsweet Components app?

No, the Finsweet Components app is free to access and use. You do not need a paid plan to generate beautiful sliders in Webflow and publish them to your staging webflow.io domain, for example. However, you will need a paid plan if you want to publish Components on your custom domain.

How do the plans work?

Finsweet Components are free to use on staging .webflow.io URLs. If you want to use the Components on your custom domain, an active plan is required. Subscriptions and Project Lifetime plans are per project, and each project that uses Finsweet Components in production requires an active plan.

Still need help?

Get Support

Watch Tutorial