Slider Generator

Create custom sliders in Webflow powered by SlickJS.
Thank you!
Oops! Something went wrong while submitting the form.
Give us feedback

[.c-title_step]How do you create custom sliders in Webflow?[.c-title_step]

Use Refokus Slider Generator to create custom sliders with static elements or CMS collection lists. This tool is powered by SlickJS, allowing you to use all of this slider flexibility without writing a line of code.


[.c-title_step]Step #1: Copy/Paste tool URL[.c-title_step]

[.c-text_step]Paste the following script in the “Before tag" field under the "Custom Code" section in the page settings.[.c-text_step]

<script src="https://tools.refokus.io/slider-generator/bundle.v1.0.0.js"></script>

[.c-title_step]Step #2: Set custom attributes[.c-title_step]

Everything is made using custom attributes, so when we say “add” that means “Add a custom attribute”.

To start, add [.c-tool_tag]r-slider="1"[.c-tool_tag] on the parent elements of the slides. 

Slider Settings

The tool will automatically create the slider with default settings. You can change these settings using the following attributes to the same element you added [.c-tool_tag]r-slider="1"[.c-tool_tag]


Base Settings

  • [.c-tool_tag]speed="500"[.c-tool_tag] (value in milliseconds) allows you to set the animation speed when the slider changes.
  • [.c-tool_tag]slider-autoplay="true"[.c-tool_tag] sets the slider to autoplay
  • [.c-tool_tag]autoplay-speed="500"[.c-tool_tag] (value in milliseconds) sets the time/speed for the autoplay to be executed. 
  • [.c-tool_tag]infinite="true"[.c-tool_tag] makes the slider have infinite slides, also known as carousel.
  • [.c-tool_tag]css-ease="ease"[.c-tool_tag] (ease, linear, ease-in, ease-out, ease-in-out) to choose the easing type you want for the animation. 
  • [.c-tool_tag]prev-arrow="#id"[.c-tool_tag] allows you target the element (using the ID) that would act as the previous arrow of the slider (ie: "#prev-arrow")
  • [.c-tool_tag]next-arrow="#id"[.c-tool_tag] allows you target the element (using the ID) that would act as the next arrow of the slider (ie: "#prev-arrow")
  • [.c-tool_tag]variable-width="true"[.c-tool_tag] lets you choose if the slides should have variable width to the browser
  • [.c-tool_tag]slides-to-scroll="3"[.c-tool_tag] allows you to set the number of elements to scroll on each interaction. 

Responsive Settings

  • [.c-tool_tag]min-width="1000"[.c-tool_tag] (value in pixels) allows you to set the minimum size of the viewport for the slider functionality. This allows you to define the screen size for the slider during activation. This attribute is extremely useful when converting desktop layouts like a grid of cards into sliders for mobile.
  • [.c-tool_tag]slides-to-show="4"[.c-tool_tag] sets the number of elements that will show per view. This setting cascades down to mobile.
  • [.c-tool_tag]tablet-slides-to-show="4"[.c-tool_tag] allows you to set the number of elements that will show per view on tablet devices.
  • [.c-tool_tag]mobile-slides-to-show="5"[.c-tool_tag] allows you to set the number of elements that will show per view on mobile devices.
  • [.c-tool_tag]tablet-slides-to-scroll="10"[.c-tool_tag] set the number of elements to scroll on tablet devices.
  • [.c-tool_tag]mobile-slides-to-scroll="2"[.c-tool_tag] set the number of elements to scroll on mobile devices.
  • [.c-tool_tag]tablet-variable-width="200" [.c-tool_tag] (value in pixels) allows you to set the variable width for tablet devices.
  • [.c-tool_tag]mobile-variable-width="1000" [.c-tool_tag] (value in pixels) allows you to set the variable width for mobile devices.

Thank you!
Oops! Something went wrong while submitting the form.
Give us feedback

Hello! 👋

Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.