[.c-title-3-primary]How do you create custom sliders in Webflow?[.c-title-3-primary]
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.
‍
Step #1
Copy the
Slider Generator
<script> and paste it before the </body> of your page
The Slider Generator tool works on both static elements or CMSÂ driven elements. As long as the custom attribute is applied to the parent of your 'Slides'.
[.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.
[.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] ssets 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.