Linux 软件免费装
Banner图

Snap Carousel — Block Style

开发者 wearewp
更新时间 2026年3月30日 21:54
PHP版本: 8.0 及以上
WordPress版本: 6.9
版权: GPL-2.0-or-later
版权网址: 版权信息

标签

gallery slider a11y block carousel

下载

1.0.3 1.0.4

详情介绍:

Most WordPress carousel plugins load heavy libraries (Slick, Swiper, jQuery) and fail basic accessibility checks. Screen readers can't navigate them, keyboard users are stuck, and WCAG audits flag them every time. Snap Carousel takes a different approach: CSS scroll-snap does the scrolling, proper ARIA attributes do the rest. No JavaScript library, no configuration panel, no learning curve — just a block style to apply in one click. Built by WeAre[WP], a WordPress agency specializing in accessible websites and RGAA audits. This plugin exists because we needed a carousel that actually passes our own audits. Supported blocks Apply any of the 4 carousel styles to: Variants Features Accessibility (WCAG 2.2 AA)

安装:

  1. Upload the snap-carousel-block-style folder to /wp-content/plugins/
  2. Activate the plugin in the Plugins menu
  3. You're all set!

屏幕截图:

  • Front-end carousel with peek effect and navigation arrows

常见问题:

Does this plugin work with any WordPress theme?

Yes. Snap Carousel uses standard WordPress Block Styles API and CSS custom properties. It works with any block theme (FSE) and most classic themes that support the Group block in Row layout. The navigation arrows automatically adapt to your theme's colors via --wp--preset--color--* design tokens.

What types of content can I put inside the carousel?

Any block that WordPress allows inside a Group, Query Loop, or Gallery block: images, columns, groups, cover blocks, WooCommerce product blocks, custom HTML… The carousel applies horizontal scroll-snap to the block's direct children (or posts/images for Query Loop and Gallery).

Is this plugin accessible?

Yes. Accessibility was a core design goal, not an afterthought. The carousel meets WCAG 2.2 AA requirements: full ARIA carousel pattern (role="region", aria-roledescription, aria-live), keyboard navigation (Arrow keys, Home, End), 44×44px minimum touch targets, visible focus indicators, and prefers-reduced-motion support.

What is the "peek" effect?

By default, items are slightly narrower than the visible area, so the next item is partially visible — signaling that there is more content to scroll. This is a well-known UX pattern that improves discoverability, especially on touch devices where navigation arrows may not be visible. You can disable it with a simple CSS override (see the Customization section).

Will this plugin slow down my site?

No. The total footprint is approximately 2 KB CSS + 2 KB JS (minified), with zero external dependencies. Assets are only loaded on pages that actually contain a carousel, so there is no performance penalty on other pages.

Can I use different carousel variants on the same page?

Yes. Each block independently gets its own style. You can have a 1-item slideshow hero at the top, a 3-item carousel in the middle, and a 4-item grid-style carousel at the bottom — all on the same page.

What happens if I deactivate the plugin?

Your content remains intact. Blocks revert to their default layout. No data is lost — the plugin only adds a visual style and does not modify your content in the database.

Can I customize the carousel appearance?

Absolutely. The plugin uses WordPress design tokens and semantic CSS classes. You can override arrow colors, sizes, shapes, spacing, focus indicators, and even disable the peek effect — all via simple CSS. See the Customization section for copy-paste examples.

Does it work with WooCommerce?

Yes. You can wrap WooCommerce product blocks inside a Group block, apply a carousel style, and it works out of the box. This is a great way to showcase featured products.

Does the carousel auto-play?

No, intentionally. Auto-playing carousels are a well-documented accessibility barrier (WCAG 2.2.2 Pause, Stop, Hide) and tend to lower engagement. The carousel is user-driven: scroll, swipe, keyboard, or click the navigation arrows.

Why does the Group justification setting have no effect on the carousel?

The carousel requires items to flow from the start edge for CSS scroll-snap to work properly. The justification control (left, center, right, space-between) is automatically overridden to ensure correct scroll behavior. This is a browser constraint, not a plugin limitation. RTL (right-to-left) languages are fully supported — items automatically flow from right to left.

Can I use the carousel with a Query Loop block?

Yes. Since version 1.0.4, you can apply any carousel style directly to a Query Loop block. Posts are rendered as horizontal slides with full ARIA attributes. This is ideal for "latest posts" or "related posts" sections.

Can I use the carousel with a Gallery block?

Yes. Apply a carousel style to any Gallery block and images scroll horizontally. The gallery caption (figcaption) is preserved and excluded from the carousel slides.

How does this compare to Slick, Swiper, or other carousel libraries?

Snap Carousel does not use any JavaScript carousel library. Scrolling is handled entirely by CSS scroll-snap, which is native to all modern browsers. JavaScript is only used for navigation buttons, keyboard handling, and screen reader announcements (~2 KB). This means fewer conflicts, better performance, and no library updates to track.

Does this plugin pass RGAA / WCAG accessibility audits?

Yes. The plugin was built specifically to pass RGAA and WCAG 2.2 AA audits. It implements the WAI-ARIA carousel pattern: role="region", aria-roledescription="carousel" on the container, role="group" on each slide, aria-live region for announcements, keyboard navigation (Arrow, Home, End), and 44×44px minimum touch targets.

Does the carousel support RTL languages?

Yes. The carousel detects the page direction automatically. In RTL mode (Arabic, Hebrew, etc.), items flow from right to left, navigation arrows adapt their direction, and keyboard navigation (ArrowLeft/ArrowRight) follows the expected visual direction.

更新日志:

1.0.4 1.0.3 1.0.2 1.0.1 1.0.0