Sliders
Create feature-rich, flexible sliders. Group or ungroup slides, infinite looping, auto populate CMS slides, slide numbering, scrollbars, slide and fade transitions.
Script
The custom code and script for this powerup can be added to your Webflow project using the "TooEasy Powerups" Webflow App. You can find the app on the Webflow Apps Marketplace or within the "Apps" tab in the Webflow designer. Once the app is installed simply locate the Powerup you'd like to use and click the "install script" button.
Slider Wrap
I want this Div Block to wrap all my slider elements
Track
I want this div block to contain my slides
Loop
I want the slideshow to loop forever
Next / Previous
When this button is clicked I want to change slides
Pagination
I want this div block to indicate how many slides there are in total
Scrollbar
I want this div block to contain the sliders scrollbar
Counter
I want this Text Block to display the current and total numberof slides
Breakpoints
I want to activate or deactivate the slider at a particular breakpoint
Speed
I want adjust the transition speed between slides
Direction
I want adjust the direction the slides move
Transition Type
I want change the way the slides transition
Free Scroll
I want to adjust the behaviour of when the slider is swiped / dragged
Alignment
I want to change the alignment of the cells inside the slider
Pause on Hover
I want to pause the slide transition when hovered
Autoplay
I want the slides to automatically switch on page load.
Slides Per View
I want to group slides together to act as a single slide
The slider will be deactivated when one of more of the breakpoints below are added as the attribute value.
- desktop — Desktop breakpoint (992px and above).
- tablet — Tablet breakpoint (from 768px to 991px).
- h-mobile — Mobile landscape breakpoint (from 479px to 767px).
- v-mobile — Portrait landscape breakpoint (478px and below).
The breakpoints (attribute value) need to be added as a comma separated list.
For example, add [data-bc-slider-inactive-breakpoints="desktop, v-mobile"]
to disable the slider on the desktop and mobile portrait breakpoints.
Add this attribute if you would like to group slides together.
A value of "auto" will automatically group all slides within the viewport.
A value of "#%" groups the number of slides within this percentage in the slider viewport. (Change "#" with you number, E.g 80%)
A numbered value will groups slides based on this number. For example "3" will indicate 3 columns in each slide.
A number array will set different slide groups for different breakpoints. For example [4,3,2,1] to represent 4 on desktop, 3 on tablet, 2 on mobile landscape and 1 on mobile portrait.