UI PATTERNS

Full-width slider variations

Eight Swiper.js slider patterns. Hero banners, peek carousels, fade transitions, parallax, thumbnails, vertical, and coverflow.

SLIDE ONE

Full-width hero with centered content

Classic banner slider. Each slide fills the viewport width. Text is centered. Navigation arrows on the sides, dots at the bottom.

Get started

SLIDE TWO

Each slide can tell a different story

Different background, different message. Autoplay optional. The dot indicator stretches when active for a pill effect.

Get started

SLIDE THREE

Third slide, same structure

Three to five slides works best. More than that and people stop swiping. Keep the best content on slide one.

Get started

FEATURED

Slides peek from the edges

01 Crossfade effect

Slides dissolve into each other instead of sliding. Feels cinematic and smooth. Good for mood-setting hero sections.

02 No horizontal motion

The fade removes the feeling of lateral movement. Each slide appears in place, which works better for text-heavy content.

03 Elegant and restrained

Paired with autoplay this creates a self-running showcase. The numbered label updates to show progress.

PORTFOLIO

Multiple cards visible

BRANDING

Project titile

WEB DESIGN

Project titile

PRODUCT

Project titile

MOBILE

Project titile

ILLUSTRATION

Project titile

MARKETING

Project titile

FEATURED

Parallax depth effect

Background moves slower than foreground text.
Creates a layered depth effect that makes the slider feel more immersive.

SOWCASE

Content aligned bottom-left

Bottom alignment works well with photo backgrounds
where the subject is centered or top-heavy. Text stays clear.

COLLECTION

Fraction pagination

Using fraction type instead of dots. Shows “1 / 3” which feels
more editorial and gives exact position.

UI PATTERNS

Full-width slider variations

Eight Swiper.js slider patterns. Hero banners, peek carousels, fade transitions, parallax, thumbnails, vertical, and coverflow.

SLIDE ONE

Full-width hero with centered content

Classic banner slider. Each slide fills the viewport width. Text is centered. Navigation arrows on the sides, dots at the bottom.

Get started

SLIDE TWO

Each slide can tell a different story

Different background, different message. Autoplay optional. The dot indicator stretches when active for a pill effect.

Get started

SLIDE THREE

Third slide, same structure

Three to five slides works best. More than that and people stop swiping. Keep the best content on slide one.

Get started

FEATURED

Slides peek from the edges

01 Crossfade effect

Slides dissolve into each other instead of sliding. Feels cinematic and smooth. Good for mood-setting hero sections.

02 No horizontal motion

The fade removes the feeling of lateral movement. Each slide appears in place, which works better for text-heavy content.

03 Elegant and restrained

Paired with autoplay this creates a self-running showcase. The numbered label updates to show progress.

PORTFOLIO

Multiple cards visible

BRANDING

Project titile

WEB DESIGN

Project titile

PRODUCT

Project titile

MOBILE

Project titile

ILLUSTRATION

Project titile

MARKETING

Project titile

FEATURED

Parallax depth effect

Background moves slower than foreground text.
Creates a layered depth effect that makes the slider feel more immersive.

SOWCASE

Content aligned bottom-left

Bottom alignment works well with photo backgrounds
where the subject is centered or top-heavy. Text stays clear.

COLLECTION

Fraction pagination

Using fraction type instead of dots. Shows “1 / 3” which feels
more editorial and gives exact position.