Coverflow | Medium

Installation Instructions

Overview Videos:

You may pick your documentation mode:

Beginner / New User Expert / Repeat User

For All Sliders: Swiper CSS

Copy Swiper CSS

Paste in Webflow

Custom Code

inside <head> tag

More details about this step

Before You Begin:

Please note that Swiper.js relies upon certain class names. If you’ve used Swiper in your Webflow project previously, please remove any instances of it, remove any associated CSS/JS code, and clear all classes that pertain to Swiper so you can start fresh.

Installation:

Paste in Custom Code area inside <head> tag in either:

Page Settings:
If you'll want to add sliders on a page-by-page basis.

Site Settings:
If you'll want to have sliders on most or all of your pages.

Tip: You'll only need to do this step once per page, or once for site settings, no matter how many sliders you'll have.

Demonstration:

Page Settings

Site Settings

Next step

For All Sliders: Swiper Library

Copy Swiper Library

Paste in Webflow

Custom Code

before <body> tag

More details about this step

Next step

For All Sliders: Sliderflow Config

Copy Sliderflow Config

Paste in Webflow

Custom Code

before <body> tag

More details about this step

Next step

For All Sliders: Sliderflow Designer CSS

Copy Designer CSS

Paste in Webflow

Navigator

anywhere

More details about this step

Next step

For All Sliders: Sliderflow Bundle

Copy Static Bundle

Copy Dynamic Bundle (CMS)

Paste in Webflow

Navigator

anywhere

More details about this step

Next step (if Static)

Next step (if Dynamic)

For Dynamic Sliders Only: CMS Connection

.swiper

Connect in Webflow

Collection List Settings

your CMS collection

More details about this step

Next step

For Dynamic Sliders Only: Sample Content

Copy Sample Content

Paste in Webflow

Navigator

.swiper

.swiper-wrapper

swiper-slide

More details about this step

Next step

For All Sliders: Optional Adjustments

To style elements, look for this combo-class:

.class-name

.sliderflow-style-here

To position elements, look for this combo-class:

.class-name

.sliderflow-position-here

Customize features here:

.swiper

Settings

Custom Attributes

More details about this step

How To:

Because Swiper and Sliderflow rely on very specific classes and CSS, we've made it easy to know the best places to adjust design:

Style:
To change color, borders, fonts, sizes, and more, look for any divs that contain the combo class sliderflow-style-here to make your adjustments.

Please Note:
It is not recommended to change the names of any classes, nor to style anything that does not contain the combo class listed above.

Demonstration:

How To:

Because Swiper and Sliderflow rely on very specific classes and CSS, we've made it easy to know the best places to adjust design:

Position:
To change from static to absolute for example, move the navigation or pagination and more, look for any divs that contain the combo class sliderflow-position-here to make your adjustments.

Please Note:
It is not recommended to change the names of any classes, nor to position anything that does not contain the combo class listed above.

Demonstration:

How To:

The sliders are designed to work without any major customization, but if you want to make adjustments or customize:

Attributes Location:
Locate and select the Collection List div named swiper, then in the Collection List Settings find the area called Custom Attributes

Please Note:
The sliders come pre-set with default attributes, but all of these values can be modified. To restore them, simply re-enter the word "default."

Demonstration:

Navigator → .swiper div → Settings → Custom Attributes

Tips & Tricks

### See a portion of the next slide
- Set swiperSlidesPerView[breakpoint] to a decimal. Example: 4.2

---

### Hide all navigation
- Set swiperShowNavigation[breakpoint] to false

---

### Hide various pagination optons
- To hide Next / Previous buttons, set swiperShowNextPrev[breakpoint] to false
- To hide bullets, set swiperShowBullets[breakpoint] to false
- To hide the numeric page count, set swiperShowFraction[breakpoint] to false
- To hide the Play / Pause buttons, Set swiperShowPlayPause[breakpoint] to false
- To hide the Progress Bar, set swiperShowProgressbar[breakpoint] to false
- To hide the Scroll Bar, set swiperShowScrollbar[breakpoint] to false.

---

### To turn a slider into a marquee
- Set swiperAutoplay[breakpoint] to marquee
- Recommended: Set swiperRewind to false
- Recommended: Set swiperLoop to true

---

### Use Parallax
- Set swiperParallax[breakpoint] to true
- Make sure there's a div with the attributes swiperParallaxContainer="true" to enable (provided with the sample slide content). Set child elements to contain values such as data-swiper-parallax="-10%" and/or data-swiper-parallax-scale="1" to see the parallax in motion.

---

### Move pagination elements such as Next / Prev buttons to the sides or "on top" of the slides, instead of underneath
- Look for any divs that contain the combo class position-here and change from static to absolute, and then position however you would like.

---

### Force a slider, marquee, etc. to stay a slider even if there are less slides than slides per view (by default it will hide the navigation and turn of slider functions since a slider is not necessary)
- Set swiperLoop to forced or set swiperRewind to forced
- This enables looping and also forces it to remain a slider if swiperSlidesPerView is less than or equal to the number of slides present. If there are not enough slides for a loop, it will clone the full set of slides once to make enough to create the loop.

Full List of Attributes

### swiperSlidesPerView[breakpoint]
Number of slides visible
- default → Desktop 4, Tablet 3, MobileLandscape 2, MobilePortrait 1
- [empty] → uses defaults
- [number] → shows this many slides
- Note: To show a portion of the next slide, set to a decimal, for example, 4.2

### swiperSpaceBetween[breakpoint]
Spacing between slides in pixels
- default → Desktop 16px, Tablet 12px, MobileLandscape 8px, MobilePortrait 4px
- [empty] → uses defaults
- [number] → sets spacing to this many pixels

### swiperAutoplay[breakpoint]
Autoplay configuration for swipers
- default → 5000ms
- [empty] → uses default (5000ms)
- true → uses default (5000ms)
- false → off
- marquee → continuous scroll
- [number] → sets delay to this in ms

### swiperSpeed[breakpoint]
Speed of slide transition in milliseconds
- default → 1000ms (5000ms if marquee mode enabled)
- [empty] → uses default
- [number] → sets speed to this many milliseconds

### swiperSlidesPerGroup[breakpoint]
Number of slides grouped together when sliding
- default → 1
- [empty] → uses default
- [number] → groups this many slides together

### swiperDirection[breakpoint]
Swiper scrolling direction
- default → horizontal
- [empty] → uses default
- horizontal → slides move left/right
- vertical → slides move up/down

### swiperRewind
Enable or disable rewinding when reaching the end
- default → true
- [empty] → uses default
- true → enables rewind
- false → disables rewind
- forced → enables rewind and also forces it to remain a slider if swiperSlidesPerView is less than or equal to the number of slides present. If there are not enough slides for a loop, it will clone the full set of slides once to make enough to create the loop.

### swiperLoop
Enable or disable looping of slides
- default → false
- [empty] → uses default
- true → enables looping
- false → disables looping
- forced → enables looping and also forces it to remain a slider if swiperSlidesPerView is less than or equal to the number of slides present. If there are not enough slides for a loop, it will clone the full set of slides once to make enough to create the loop.

### swiperReverseDirection
Reverse slide direction
- default → false
- [empty] → uses default
- true → reverses direction
- false → normal direction

### swiperSlideStart
Define the initial slide position
- default → first
- [empty] → uses default
- first → starts at the first slide
- last → starts at the last slide
- [number] → starts at this slide index

### swiperFillEmptySlots
Fill empty space in the Swiper container
- default → true
- [empty] → uses default
- true → fills empty slots
- false → does not fill empty slots

### swiperShowNavigation[breakpoint]
Show or hide navigation arrows
- default → true
- [empty] → uses default
- true → shows navigation arrows
- false → hides navigation arrows

### swiperShowNextPrev[breakpoint]
Show or hide next/prev buttons
- default → true
- [empty] → uses default
- true → shows next/prev buttons
- false → hides next/prev buttons

### swiperShowBullets[breakpoint]
Show or hide bullet pagination
- default → false
- [empty] → uses default
- true → shows bullet pagination
- false → hides bullet pagination

### swiperShowFraction[breakpoint]
Show or hide fraction pagination (e.g., 1/5)
- default → false
- [empty] → uses default
- true → shows fraction pagination
- false → hides fraction pagination

### swiperShowPlayPause[breakpoint]
Show or hide play/pause buttons
- default → false
- [empty] → uses default
- true → shows play/pause buttons
- false → hides play/pause buttons

### swiperShowProgressbar[breakpoint]
Show or hide progress bar pagination
- default → false
- [empty] → uses default
- true → shows progress bar
- false → hides progress bar

### swiperShowScrollbar[breakpoint]
Show or hide scrollbar pagination
- default → false
- [empty] → uses default
- true → shows scrollbar
- false → hides scrollbar

### swiperCenteredSlides[breakpoint]
Enable centered slides
- default → false
- [empty] → uses default
- true → centers slides
- false → does not center slides

### swiperPauseOnMouseEnter[breakpoint]
Pause autoplay on mouse enter
- default → false
- [empty] → uses default
- true → pauses autoplay on hover
- false → continues autoplay

### swiperDynamicBullets[breakpoint]
Enable dynamic bullets in pagination
- default → false
- [empty] → uses default
- true → enables dynamic bullets
- false → disables dynamic bullets

### swiperFreeMode[breakpoint]
Enable free scrolling mode
- default → true
- [empty] → uses default
- true → enables free mode
- false → disables free mode

### swiperFreeModeMomentumBounce
Enable bounce effect in free mode
- default → true
- [empty] → uses default
- true → enables bounce effect
- false → disables bounce effect

### swiperAllowTouchMove[breakpoint]
Allow or disable swipe gestures
- default → true
- [empty] → uses default
- true → allows swiping
- false → disables swiping

### swiperGrabCursor[breakpoint]
Enable grab cursor on hover
- default → true
- [empty] → uses default
- true → shows grab cursor
- false → hides grab cursor

### swiperParallax[breakpoint]
Enable parallax effect
- default → false
- [empty] → uses default
- true → enables parallax
- false → disables parallax
- Note: Requires a div with swiperParallaxContainer="true" to enable. Set child elements to values such as data-swiper-parallax="-10%" and/or data-swiper-parallax-scale="1" to see the parallax in motion.

### swiperEffect
Set Swiper effect
- default → slide
- [empty] → uses default
- slide → normal sliding effect
- fade → crossfade effect
- coverflow → 3D coverflow effect
- flip → flipping card effect
- cube → rotating cube effect
- cards → stacked cards effect

### swiperEffectFadeCrossfade
Enable crossfade effect for fade mode
- default → false
- [empty] → uses default
- true → enables crossfade
- false → disables crossfade

### swiperEffectCoverflowDepth
Depth of the coverflow effect
- default → 100
- [empty] → uses default
- [number] → sets depth

### swiperEffectCoverflowModifier
Strength of the coverflow effect
- default → 1
- [empty] → uses default
- [number] → modifies effect strength

### swiperEffectCoverflowRotate
Rotation angle in coverflow effect
- default → 50
- [empty] → uses default
- [number] → sets rotation angle

### swiperEffectCoverflowScale
Scale of slides in coverflow effect
- default → 1
- [empty] → uses default
- [number] → sets scale

### swiperEffectCoverflowStretch
Stretch of slides in coverflow effect
- default → 0
- [empty] → uses default
- [number] → sets stretch amount

### swiperEffectCoverflowSlideShadows
Enable shadows in coverflow effect
- default → true
- [empty] → uses default
- true → enables shadows
- false → disables shadows

### swiperEffectFlipLimitRotation
Limit rotation in flip effect
- default → true
- [empty] → uses default
- true → enables limit
- false → disables limit

### swiperEffectFlipSlideShadows
Enable shadows in flip effect
- default → true
- [empty] → uses default
- true → enables shadows
- false → disables shadows

### swiperEffectCubeShadow
Enable cube shadow effect
- default → true
- [empty] → uses default
- true → enables shadow
- false → disables shadow

### swiperEffectCubeSlideShadows
Enable slide shadows in cube effect
- default → true
- [empty] → uses default
- true → enables shadows
- false → disables shadows

### swiperSticky[breakpoint]
Enable snap to slide in free mode
- default → true
- [empty] → uses default
- true → enables sticky snapping
- false → disables sticky snapping

### role="region"
Used for accessibility. Defines a generic landmark region that groups content together, allowing screen readers to navigate to it easily.

### aria-roledescription="slider"
Used for accessibility. Provides a human-readable description (“slider”) of the widget’s role to help screen reader users understand its purpose, even if the default meaning of role="region" is unclear.

### aria-label="Content Slider"
Used for accessibility. Assigns a custom label (“Content Slider”) that describes the purpose of the region/slider to assistive technologies, so users know what this specific area is for.