| 开发者 | wearewp |
|---|---|
| 更新时间 | 2026年3月30日 21:54 |
| PHP版本: | 8.0 及以上 |
| WordPress版本: | 6.9 |
| 版权: | GPL-2.0-or-later |
| 版权网址: | 版权信息 |
core/group) — any child blocks become slidescore/query) — posts scroll as carousel slidescore/gallery) — images scroll as carousel slidesprefers-reduced-motionrole="region" + aria-roledescription="carousel" on the containerrole="group" + aria-roledescription="slide" on each itemaria-label="X of Y" for position contexttabindex="0" for keyboard focusaria-live="polite" to announce changesaria-label and aria-controlssnap-carousel-block-style folder to /wp-content/plugins/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.
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).
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.
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).
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.