如何实现支持触摸与滚动的垂直轮播？含点击跳转功能

Hey Kevin, great question! Building a vertical carousel with touch support, smooth scrolling, and that specific click behavior is totally achievable with existing tools—no need to build everything from scratch. Here are my top recommendations tailored to your needs:

1. Swiper.js #

• Why it fits: Swiper is one of the most versatile and widely used carousel libraries, with full out-of-the-box support for vertical carousels, touch gestures, and fluid scrolling. It’s highly customizable, so you can easily implement your unique click logic.
• How to use it for your requirements:
  • Set direction: 'vertical' in the Swiper config to enable vertical scrolling mode.
  • Bind a click event to all slides, then compare the clicked slide’s index with swiper.activeIndex to check if it’s the active slide.
  • For active slides: Trigger a page redirect with window.location.href = yourTargetUrl.
  • For non-active slides: Use Swiper’s slideTo() method to scroll directly to that slide, or if you need to jump to a separate page element, use document.querySelector(targetElement).scrollIntoView({ behavior: 'smooth' }).
• Bonus: It includes built-in responsive support and a huge ecosystem of plugins if you need extra features later on.

2. Glide.js #

• Why it fits: Glide is a lightweight, modern carousel library with a clean, intuitive API. It supports vertical carousels, touch interactions, and smooth scrolling without adding unnecessary bloat to your project.
• How to use it for your requirements:
  • Initialize Glide with type: 'carousel' and direction: 'vertical' in the config.
  • Listen for click events on slides, then check if the slide has the glide__slide--active class to identify the active slide.
  • Handle active slides with a page redirect, and non-active slides by calling glide.go('=' + slideIndex) to scroll to the target slide, or use native scroll methods for page elements.
• Bonus: Its tiny file size makes it ideal for performance-focused projects where every KB counts.

3. Flickity #

• Why it fits: Flickity is built specifically for touch-friendly carousels, with exceptional momentum scrolling and vertical support. It’s perfect if you want a native-like, smooth touch experience for your users.
• How to use it for your requirements:
  • Enable vertical scrolling by setting vertical: true in the Flickity config.
  • On slide click, check if the slide matches flickity.selectedIndex to confirm it’s the active slide.
  • For active slides: Redirect to your specified page.
  • For non-active slides: Use flickity.select(slideIndex) to scroll to the target slide, or scrollIntoView for external page elements.
• Bonus: It offers a "free-scroll" option if you want users to freely glide through slides instead of snapping to each one.

Honorable Mention: Native CSS Scroll Snap + Vanilla JavaScript #

If you want full control without relying on a third-party library, you can use CSS Scroll Snap paired with vanilla JavaScript:

• Set up a container with scroll-snap-type: y mandatory and slides with scroll-snap-align: start to enable native vertical snapping.
• Let native browser behavior handle touch scrolling, or add custom touch event listeners if you need more control.
• Bind click events to slides, use getBoundingClientRect() to check if the slide is in the viewport (active), then handle redirects or scroll actions accordingly.
• This approach gives you maximum customization but requires more manual work for edge cases like touch momentum and cross-browser consistency.

Pick the option that best matches your project’s size, performance needs, and customization goals—all of these tools can handle your core requirements smoothly!

内容的提问来源于stack exchange，提问作者Kevin From