Related Snippets

61 in Carousels & Sliders category
16–21 of 60
Swiper Vertical Full-Page Slider with Wheel Release

Swiper Vertical Full-Page Slider with Wheel Release

Swiper Thumbnail-Synced Gallery

Swiper Thumbnail-Synced Gallery

Swiper Coverflow 3D Product Carousel

Swiper Coverflow 3D Product Carousel

Glide.js Logo Carousel Autoplay

Glide.js Logo Carousel Autoplay

Glide.js Product Gallery Slider

Glide.js Product Gallery Slider

Glide.js Testimonial Slider

Glide.js Testimonial Slider

Swiper Vertical Full-Page Slider — Free JS Snippet

Swiper Vertical Full-Page Slider with Wheel Release · Carousels · Plain HTML, CSS & JS · Live preview

CategoryCarousels & Sliders
TagsTouch GesturesCSS AnimationAccessibilityMedia PlayerMobile UI

What's included

Features

Vertical direction with 700ms transitions
Throttled wheel input (thresholdDelta and thresholdTime) for one section per flick
releaseOnEdges so the page can scroll past the slider at either end
Keyboard control limited to when the slider is in the viewport
a11y module with custom "Next section" messages
Staggered entrance animation keyed off swiper-slide-active
Pill-shaped active pagination bullet and live counter
Reduced-motion support

About this UI Snippet

Swiper Vertical Full-Page Slider — HTML, CSS & JavaScript

Screenshot of the Swiper Vertical Full-Page Slider with Wheel Release snippet rendered live

Full-page section sliders — one idea per screen, snapping into place as you scroll — are a staple of product tours and landing pages. They are also famous for a usability failure: the scroll trap. If the slider captures the mouse wheel and never lets go, a visitor who scrolls to the last section is stuck there, unable to reach the footer or the rest of the page. Swiper handles both halves of that problem with options on its mousewheel module, and this snippet is built around them.

direction: 'vertical' makes the slides stack top to bottom, and the mousewheel object shapes how wheel input translates to movement. thresholdDelta ignores tiny wheel movements, and thresholdTime accepts only one movement per 500 milliseconds. Together they solve the "one flick, three slides" problem: a trackpad swipe generates a burst of wheel events, and without throttling the slider would skip several sections at once. Then releaseOnEdges: true fixes the scroll trap. At the first and last slide it stops capturing the wheel, so the next scroll moves the surrounding page. Without it the section slider swallows all vertical scrolling that reaches it.

Keyboard control comes from keyboard: { enabled: true, onlyInViewport: true }, where the second flag matters on a page with other content, since without it the arrow keys would change slides even when the slider is scrolled off-screen. The a11y module adds live announcements and labelled buttons, and the custom messages read "Next section" rather than the generic "Next slide".

The visual polish is CSS. Content inside slides starts translated and transparent, and the active slide — identified by the swiper-slide-active class Swiper maintains — transitions its children to their resting position with a staggered delay, so headings, text and details settle in one after another each time a section arrives. The pagination bullets turn into tall pills for the active section, the counter updates on slideChange, and the "Scroll" hint hides once swiper.isEnd is true. Animation is turned off for people who prefer reduced motion.

Step by step

How to Use

  1. 1
    Scroll the wheelScroll over the slider. One flick moves exactly one section, even with a fast trackpad.
  2. 2
    Use the keyboardPress the up and down arrow keys, or click the pagination pills, to jump between sections.
  3. 3
    Watch the entranceEach section's heading, text and detail fade in one after another.
  4. 4
    Reach the endOn the last section the hint disappears and further scrolling moves the page instead of trapping you.
  5. 5
    Check the counterThe counter shows the current section number as you move.

Real-world uses

Common Use Cases

🖥️
Landing pages and product tours
Present one idea per screen with 700 millisecond transitions, and releaseOnEdges letting the page scroll past at either end.
📣
Campaign microsites
Walk visitors through a story with snapping sections, throttling wheel input so one flick moves exactly one section.
✨
Feature tours
Introduce features one at a time with staggered content animation and side pagination, limiting keyboard control to when the slider is in view.
🌄
Parallax pairing
Compare with Swiper parallax hero slides for a horizontal approach to full-screen storytelling on landing pages.
🎓
Scroll-trap avoidance learning
Learn why a slider that captures the wheel can trap users, and how releasing on edges avoids that frustration.

Got questions?

Frequently Asked Questions

A trackpad flick fires many wheel events. Set mousewheel.thresholdTime (and thresholdDelta) so only one movement is accepted per interval.

Set mousewheel.releaseOnEdges: true. At the first and last slide, the wheel then scrolls the surrounding page.

Use keyboard.onlyInViewport: true so keys only work while the slider is visible.

Style children under .swiper-slide-active with transitions, as Swiper toggles that class for the current slide.

Check swiper.isEnd in the slideChange handler.

Enable the a11y module, provide meaningful prev/next messages and ensure keyboard access, and respect prefers-reduced-motion.

Yes. Use the JSX, Vue, Angular or Tailwind export buttons on this page to convert the markup and styles. The behaviour comes from Swiper, so in a framework project install it with npm install swiper (its React and Vue components take the same options) instead of the CDN tag, use the Swiper and SwiperSlide components, or create it in useEffect / onMounted / ngAfterViewInit, and release it with destroy() when the component unmounts.

Build with AI

Build, Understand, Optimize, and Extend It With AI

Ask an AI assistant like Claude to sync the sections to URL hashes, add a progress line instead of bullets, or switch to horizontal on narrow screens.

Prompt to recreate it

Copy this into your AI assistant of choice to build the effect from scratch, or as a jumping-off point for your own variant:

text
Build a vertical full-page section slider with Swiper 11 loaded from a CDN (bundle script and CSS).

Requirements:
- Use direction 'vertical', speed 700, four full-height gradient sections and a right-side pagination with clickable bullets.
- Configure mousewheel with thresholdDelta 25, thresholdTime 500 and releaseOnEdges: true, and keyboard with onlyInViewport: true; enable the a11y module with custom prev/next messages.
- Animate each section's content in with staggered CSS transitions keyed off .swiper-slide-active, and respect prefers-reduced-motion.
- Show an "n / total" counter and a scroll hint that hides when swiper.isEnd is true, updated in the slideChange event.

Want to tighten it up first? Run this prompt through the AI Prompt Studio to score it across 8 quality dimensions, catch anti-patterns, and tune the wording for Claude, ChatGPT, or Gemini before you paste it in.

Source Code

Requires
CSS · swiper-bundle.min.cssJS · swiper-bundle.min.js
<div class="fp-wrap">
  <div class="swiper fp-swiper" id="fpSwiper">
    <div class="swiper-wrapper">
      <section class="swiper-slide s1"><div class="fp-in"><span class="fp-kick">01 &middot; Discover</span><h2>Find the right plan in seconds</h2><p>Scroll, swipe or press &darr; to move between sections.</p></div></section>
      <section class="swiper-slide s2"><div class="fp-in"><span class="fp-kick">02 &middot; Build</span><h2>Compose with real components</h2><p>Each section snaps into place with a smooth 700ms transition.</p></div></section>
      <section class="swiper-slide s3"><div class="fp-in"><span class="fp-kick">03 &middot; Ship</span><h2>Deploy without ceremony</h2><p>Wheel input is throttled so one flick moves exactly one section.</p></div></section>
      <section class="swiper-slide s4"><div class="fp-in"><span class="fp-kick">04 &middot; Grow</span><h2>Measure what matters</h2><p>At the last slide the wheel is released, so the page can scroll on.</p></div></section>
    </div>
    <div class="swiper-pagination"></div>
    <div class="fp-counter" id="fpCounter" aria-live="polite">1 / 4</div>
    <div class="fp-hint" id="fpHint">Scroll &darr;</div>
  </div>
</div>