{"id":257443,"date":"2025-11-11T14:16:37","date_gmt":"2025-11-11T14:16:37","guid":{"rendered":"https:\/\/wordpress.org\/plugins\/block-carousel\/"},"modified":"2026-04-16T09:41:44","modified_gmt":"2026-04-16T09:41:44","slug":"native-blocks-carousel","status":"publish","type":"plugin","link":"https:\/\/test.wordpress.org\/plugins\/native-blocks-carousel\/","author":18540324,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_crdt_document":"","version":"1.0.5.4","stable_tag":"1.0.5.4","tested":"7.0","requires":"6.0","requires_php":"7.4","requires_plugins":null,"header_name":"Any Block Carousel Slider","header_author":"weblazer","header_description":"Transform any WordPress block into a performant carousel with pure CSS. Zero JavaScript, works with Gallery, Grid, Post Template, and Group blocks.","assets_banners_color":"06628e","last_updated":"2026-04-16 09:41:44","external_support_url":"","external_repository_url":"","donate_link":"","header_plugin_uri":"https:\/\/wordpress.org\/plugins\/native-blocks-carousel\/","header_author_uri":"https:\/\/profiles.wordpress.org\/weblazer\/","rating":4.3,"author_block_rating":0,"active_installs":60,"downloads":1231,"num_ratings":3,"support_threads":0,"support_threads_resolved":0,"author_block_count":0,"sections":["description","installation","faq","changelog"],"tags":{"1.0.1":{"tag":"1.0.1","author":"weblazer","date":"2025-11-13 15:27:30"},"1.0.2":{"tag":"1.0.2","author":"weblazer","date":"2025-11-13 15:27:30"},"1.0.3":{"tag":"1.0.3","author":"weblazer","date":"2025-11-13 15:23:18"},"1.0.3.1":{"tag":"1.0.3.1","author":"weblazer","date":"2025-11-13 15:59:40"},"1.0.3.2":{"tag":"1.0.3.2","author":"weblazer","date":"2025-11-13 16:21:25"},"1.0.3.3":{"tag":"1.0.3.3","author":"weblazer","date":"2025-11-13 16:40:32"},"1.0.3.4":{"tag":"1.0.3.4","author":"weblazer","date":"2025-11-14 13:05:40"},"1.0.3.5":{"tag":"1.0.3.5","author":"weblazer","date":"2025-11-14 13:23:49"},"1.0.3.6":{"tag":"1.0.3.6","author":"weblazer","date":"2025-12-16 16:09:05"},"1.0.4":{"tag":"1.0.4","author":"weblazer","date":"2025-12-18 16:34:11"},"1.0.4.1":{"tag":"1.0.4.1","author":"weblazer","date":"2025-12-18 16:39:32"},"1.0.4.2":{"tag":"1.0.4.2","author":"weblazer","date":"2026-02-08 10:09:14"},"1.0.4.3":{"tag":"1.0.4.3","author":"weblazer","date":"2026-02-08 10:49:23"},"1.0.4.4":{"tag":"1.0.4.4","author":"weblazer","date":"2026-03-05 13:37:36"},"1.0.5":{"tag":"1.0.5","author":"weblazer","date":"2026-03-11 15:35:25"},"1.0.5.1":{"tag":"1.0.5.1","author":"weblazer","date":"2026-03-11 15:41:29"},"1.0.5.2":{"tag":"1.0.5.2","author":"weblazer","date":"2026-03-11 16:37:55"},"1.0.5.3":{"tag":"1.0.5.3","author":"weblazer","date":"2026-03-11 21:06:55"},"1.0.5.4":{"tag":"1.0.5.4","author":"weblazer","date":"2026-04-16 09:41:44"}},"upgrade_notice":{"1.0.4":"<p>Recommended update: adds Loop and Autoplay features for enhanced carousel functionality. Loop enables infinite scrolling, and Autoplay provides automatic slide progression with configurable timing.<\/p>","1.0.3":"<p>Recommended update: fixes dynamic arrow style updates in the editor and improves compatibility with Site Editor iframes.<\/p>","1.0.2":"<p>Recommended update: manage arrow and marker visibility directly from the editor with consistent styling on both admin and frontend.<\/p>"},"ratings":{"1":0,"2":0,"3":1,"4":0,"5":2},"assets_icons":{"icon-256x256.gif":{"filename":"icon-256x256.gif","revision":3480322,"resolution":"256x256","location":"assets","locale":"","width":256,"height":256},"icon.svg":{"filename":"icon.svg","revision":3480322,"resolution":false,"location":"assets","locale":false}},"assets_banners":{"banner-1544x500.gif":{"filename":"banner-1544x500.gif","revision":3480322,"resolution":"1544x500","location":"assets","locale":"","width":1544,"height":500},"banner-772x250.gif":{"filename":"banner-772x250.gif","revision":3480322,"resolution":"772x250","location":"assets","locale":"","width":772,"height":250},"banner.svg":{"filename":"banner.svg","revision":3480322,"resolution":false,"location":"assets","locale":false}},"assets_blueprints":{},"all_blocks":[],"tagged_versions":["1.0.1","1.0.2","1.0.3","1.0.3.1","1.0.3.2","1.0.3.3","1.0.3.4","1.0.3.5","1.0.3.6","1.0.4","1.0.4.1","1.0.4.2","1.0.4.3","1.0.4.4","1.0.5","1.0.5.1","1.0.5.2","1.0.5.3","1.0.5.4"],"block_files":[],"assets_screenshots":{"screenshot-1.png":{"filename":"screenshot-1.png","revision":3480322,"resolution":"1","location":"assets","locale":"","width":560,"height":258},"screenshot-2.png":{"filename":"screenshot-2.png","revision":3480322,"resolution":"2","location":"assets","locale":"","width":2560,"height":1440},"screenshot-3.png":{"filename":"screenshot-3.png","revision":3480322,"resolution":"3","location":"assets","locale":"","width":2560,"height":1440},"screenshot-4.png":{"filename":"screenshot-4.png","revision":3480322,"resolution":"4","location":"assets","locale":"","width":2560,"height":1440}},"screenshots":{"1":"\"Carousel\" option in the Gutenberg block sidebar panel.","2":"Query Loop \/ Post Template carousel slider rendered with 100% CSS.","3":"Group block converted into a responsive carousel.","4":"Native Gallery block displayed in carousel slider mode.","5":"Custom CSS variables to adapt the carousel slider design."},"jetpack_post_was_ever_published":false},"plugin_section":[],"plugin_tags":[1220,786,148076,611,286],"plugin_category":[50,59],"plugin_contributors":[250552],"plugin_business_model":[],"class_list":["post-257443","plugin","type-plugin","status-publish","hentry","plugin_tags-block","plugin_tags-carousel","plugin_tags-gutenberg","plugin_tags-slider","plugin_tags-woocommerce","plugin_category-media","plugin_category-utilities-and-tools","plugin_contributors-weblazer","plugin_committers-weblazer","plugin_support_reps-supportweblazer"],"banners":{"banner":"https:\/\/ps.w.org\/native-blocks-carousel\/assets\/banner-772x250.gif?rev=3480322","banner_2x":"https:\/\/ps.w.org\/native-blocks-carousel\/assets\/banner-1544x500.gif?rev=3480322","banner_rtl":false,"banner_2x_rtl":false},"icons":{"svg":"https:\/\/ps.w.org\/native-blocks-carousel\/assets\/icon.svg?rev=3480322","icon":"https:\/\/ps.w.org\/native-blocks-carousel\/assets\/icon.svg?rev=3480322","icon_2x":false,"generated":false},"screenshots":[{"src":"https:\/\/ps.w.org\/native-blocks-carousel\/assets\/screenshot-1.png?rev=3480322","caption":"\"Carousel\" option in the Gutenberg block sidebar panel."},{"src":"https:\/\/ps.w.org\/native-blocks-carousel\/assets\/screenshot-2.png?rev=3480322","caption":"Query Loop \/ Post Template carousel slider rendered with 100% CSS."},{"src":"https:\/\/ps.w.org\/native-blocks-carousel\/assets\/screenshot-3.png?rev=3480322","caption":"Group block converted into a responsive carousel."},{"src":"https:\/\/ps.w.org\/native-blocks-carousel\/assets\/screenshot-4.png?rev=3480322","caption":"Native Gallery block displayed in carousel slider mode."}],"raw_content":"<!--section=description-->\n<p><strong>Any Block Carousel Slider<\/strong> is a Gutenberg carousel slider block plugin that instantly converts supported native WordPress blocks (Query Loop\/Post Template, Group, Gallery) into a responsive carousel slider without adding a dedicated block or loading a JavaScript library. Simply enable the \"Carousel\" toggle in the Gutenberg editor: your content stays 100% native, your DOM stays lightweight, and your Lighthouse performance scores remain intact. This includes WooCommerce product listings rendered via the Query Loop\/Post Template block, so you can showcase products without relying on the legacy Products block.<\/p>\n\n<h3>Try it out<\/h3>\n\n<p>Experience the plugin in seconds without installing anything! Launch our interactive demo:\n<a href=\"https:\/\/playground.wordpress.net\/?blueprint-url=https:\/\/native-blocks-carousel.weblazer.fr\/playground\/blueprint.json\">Launch Playround Demo<\/a><\/p>\n\n<p>Unlike many all-in-one carousel slider blocks that require you to add a dedicated \"Carousel\" block and rebuild every slide, <strong>Any Block Carousel Slider<\/strong> hooks straight into the Gutenberg blocks you already use. The result: a Query Loop\/Post Template, Group, or Gallery block can become a carousel slider in one click, without content duplication or extra maintenance.<\/p>\n\n<h4>Why Any Block Carousel Slider instead of a dedicated carousel slider block?<\/h4>\n\n<ul>\n<li><strong>WordPress loops without friction<\/strong> \u2013 Transform Query Loop and Post Template Gutenberg blocks into a \"loop slider\" without creating a block per slide.<\/li>\n<li><strong>Familiar editorial experience<\/strong> \u2013 Content editors keep the Gutenberg interface they know (patterns, global styles, alignments, inner blocks).<\/li>\n<li><strong>Zero JavaScript on the frontend<\/strong> \u2013 Native scroll, <code>scroll-snap<\/code>, GPU-friendly, no Swiper\/Slick bundle to load.<\/li>\n<li><strong>Full compatibility<\/strong> \u2013 Works with classic themes and block themes while respecting the structure of your Query Loop\/Post Template, Group, and Gallery blocks.<\/li>\n<li><strong>Accessibility + SEO<\/strong> \u2013 Keyboard navigation, respects <code>prefers-reduced-motion<\/code> preferences, clean DOM for crawling.<\/li>\n<\/ul>\n\n<h4>What you can do in 30 seconds<\/h4>\n\n<ul>\n<li><strong>Blog \/ Magazine<\/strong>: Display your latest posts in a Query Loop carousel with native filters and badges.<\/li>\n<li><strong>Portfolios &amp; testimonials<\/strong>: Keep your Group blocks and make them scrollable without rebuilding every slide.<\/li>\n<li><strong>Advanced galleries<\/strong>: Turn the Gallery block into a responsive slider while keeping all native settings.<\/li>\n<li><strong>Landing sections<\/strong>: Chain complex sections (image, title, buttons, forms) inside the same Group block and scroll them horizontally.<\/li>\n<li><strong>WooCommerce highlights<\/strong>: Use a Query Loop configured for products (featured, on sale, custom taxonomy) and convert it into a CSS-only product carousel.<\/li>\n<\/ul>\n\n<h4>Quick comparison<\/h4>\n\n<ul>\n<li><strong>Activation<\/strong>: Any Block Carousel Slider \u2013 toggle an existing Gutenberg block. Classic carousel slider blocks \u2013 add a dedicated slider block and rebuild every slide.<\/li>\n<li><strong>WordPress loop<\/strong>: Any Block Carousel Slider \u2013 works with Query Loop and Post Template blocks without duplication. Competitor carousels \u2013 require one block per slide or custom code.<\/li>\n<li><strong>Frontend JavaScript<\/strong>: Any Block Carousel Slider \u2013 zero JavaScript, 100% CSS carousel slider. Competitor carousels \u2013 load Swiper\/Slick and additional scripts.<\/li>\n<li><strong>Performance<\/strong>: Any Block Carousel Slider \u2013 lightweight DOM, no external assets. Competitor carousels \u2013 multiply files, reflow, and downloads.<\/li>\n<li><strong>Content maintenance<\/strong>: Any Block Carousel Slider \u2013 single Gutenberg block to update. Competitor carousels \u2013 duplicate content in dedicated slides.<\/li>\n<li><strong>Security &amp; upkeep<\/strong>: Any Block Carousel Slider \u2013 no third-party libraries to monitor. Competitor carousels \u2013 depend on external JS libraries like Swiper\/Slick.<\/li>\n<\/ul>\n\n<h4>Key features<\/h4>\n\n<ul>\n<li><strong>100% CSS<\/strong> \u2013 Smooth carousel slider with <code>scroll-snap<\/code>, <code>::scroll-button<\/code>, and <code>::scroll-marker<\/code>. No script to bundle.<\/li>\n<li><strong>Loop functionality<\/strong> \u2013 Enable infinite scrolling with seamless reset to start\/end when reaching boundaries.<\/li>\n<li><strong>Autoplay support<\/strong> \u2013 Automatic slide progression with configurable delay and pause on hover\/interaction.<\/li>\n<li><strong>Smart responsive<\/strong> \u2013 Automatically handles visible columns, spacing, and control sizes according to WordPress breakpoints (1280, 1024, 782, 600, 480, 375).<\/li>\n<li><strong>Two width modes<\/strong> \u2013 Manual mode (fixed column count) and Auto mode (fixed width like 320px) with automatic detection.<\/li>\n<li><strong>Gutenberg block spacing detection<\/strong> \u2013 Respects <code>gap<\/code> and <code>padding<\/code> values defined in the block editor, including presets.<\/li>\n<li><strong>Theme colors<\/strong> \u2013 Buttons automatically inherit your theme's colors and radii (via CSS variables).<\/li>\n<li><strong>Intact semantics<\/strong> \u2013 Your Gutenberg block's tags and classes remain unchanged: perfect for SEO, schemas, and E2E testing.<\/li>\n<li><strong>WooCommerce friendly<\/strong> \u2013 Query Loop can target the <code>product<\/code> post type, so WooCommerce grids become CSS-only carousels without a dedicated Products block integration.<\/li>\n<\/ul>\n\n<h4>Native Gutenberg block workflow<\/h4>\n\n<ol>\n<li>Add or edit one of the supported blocks (Gallery, Group, or Query Loop\/Post Template).<\/li>\n<li>Enable the <strong>Carousel<\/strong> option in the Gutenberg sidebar panel (Layout or Block section depending on the block).<\/li>\n<li>Adjust your usual settings (column count, minimum width, spacing, alignment).<\/li>\n<li>Save: your block becomes a touch-friendly, accessible, and SEO-friendly carousel slider.<\/li>\n<\/ol>\n\n<h4>Advanced customization<\/h4>\n\n<ul>\n<li><strong>Loop mode<\/strong> \u2013 Enable infinite scrolling: when reaching the end, the carousel seamlessly resets to the beginning (and vice versa). Navigation buttons remain active at all times.<\/li>\n<li><strong>Autoplay<\/strong> \u2013 Automatic slide progression with configurable delay (default: 3000ms). Autoplay pauses on hover and user interaction, and stops at the end when loop is disabled.<\/li>\n<li><strong>Manual mode (fixed columns)<\/strong> \u2013 Ideal for article carousel sliders: 1 to 6 columns depending on screen sizes.<\/li>\n<li><strong>Auto mode (fixed width)<\/strong> \u2013 Perfect for card-based sliders (posts, testimonials, product highlights) with pixel-perfect widths like 280px, 320px, or 360px.<\/li>\n<li><strong>Padding and gaps<\/strong> \u2013 Automatic management via CSS vars <code>--carousel-padding-*<\/code>, <code>--wp--style--block-gap<\/code>.<\/li>\n<li><strong>Themes &amp; <code>theme.json<\/code><\/strong> \u2013 Override variables to align controls with your design system.<\/li>\n<li><strong>Graceful degradation<\/strong> \u2013 If a browser doesn't support <code>::scroll-button<\/code>, users keep touch and mouse scrolling.<\/li>\n<\/ul>\n\n<h4>Technical architecture<\/h4>\n\n<ul>\n<li><code>render_block<\/code> hook to inject variables based on context (block type, columns, gaps).<\/li>\n<li>Dedicated service for translating labels and help messages.<\/li>\n<li>Separate editor\/frontend styles for a transparent Gutenberg experience.<\/li>\n<li>Code organized by PSR-4 services (see <code>ARCHITECTURE.md<\/code> for details).<\/li>\n<\/ul>\n\n<h3>How to use the plugin<\/h3>\n\n<ol>\n<li>Install and activate <strong>Any Block Carousel Slider<\/strong> from the Plugins screen (Plugins \u2192 Add New \u2192 search \u2192 Install \u2192 Activate).<\/li>\n<li>Open the block editor, insert one of the supported blocks (Query Loop\/Post Template, Group, Gallery), and toggle the <strong>Carousel<\/strong> option in the sidebar.<\/li>\n<li>Ensure the carousel-enabled block sits inside a parent Group (or similar container) so the wrapper can manage overflow, spacing, and arrow positioning properly.<\/li>\n<li>Switch the block layout to <strong>Grid<\/strong> then adjust the column count to match your design.<\/li>\n<\/ol>\n\n<h3>Developer Notes<\/h3>\n\n<h4>GitHub Repository<\/h4>\n\n<p>Source code is available on GitHub: <a href=\"https:\/\/github.com\/WEBLAZER\/native-blocks-carousel\">https:\/\/github.com\/WEBLAZER\/native-blocks-carousel<\/a><\/p>\n\n<h4>Contributions<\/h4>\n\n<p>Contributions are welcome! You can:\n* Open a GitHub ticket to report a bug or suggest an improvement.\n* Propose a Pull Request.\n* Help with translation (<code>.po<\/code> files available in <code>languages\/<\/code>).<\/p>\n\n<h4>Available hooks<\/h4>\n\n<p>The plugin uses the <code>render_block<\/code> hook to dynamically inject CSS variables based on the current block.<\/p>\n\n<h4>Main CSS Variables<\/h4>\n\n<p><strong>Layout &amp; Spacing:<\/strong>\n* <code>--wp--style--block-gap<\/code> \u2013 Spacing between elements (responsive).\n* <code>--carousel-min-width<\/code> \u2013 Minimum width for grids in Auto mode.\n* <code>--carousel-grid-item-width<\/code> \u2013 Item width in Manual mode.\n* <code>--carousel-padding-left<\/code>, <code>--carousel-padding-right<\/code>, <code>--carousel-padding-top<\/code>, <code>--carousel-padding-bottom<\/code> \u2013 Detected padding.<\/p>\n\n<p><strong>Navigation buttons:<\/strong>\n* <code>--carousel-button-bg<\/code>, <code>--carousel-button-color<\/code> \u2013 Colors auto-detected from theme.\n* <code>--carousel-button-size<\/code> \u2013 Button size (3rem \u2192 1.75rem).\n* <code>--carousel-button-offset<\/code> \u2013 Lateral offset based on container width.\n* <code>--carousel-shadow<\/code> \u2013 Shadow applied to controls.<\/p>\n\n<p><strong>Markers (dots):<\/strong>\n* <code>--carousel-marker-size<\/code> \u2013 Marker size.\n* <code>--carousel-marker-gap<\/code> \u2013 Horizontal spacing.\n* <code>--carousel-marker-bottom-offset<\/code> \u2013 Vertical position.<\/p>\n\n<p><strong>Miscellaneous:<\/strong>\n* <code>--carousel-z-index<\/code> \u2013 Display priority (default 999999).\n* <code>--carousel-transition-duration<\/code>, <code>--carousel-transition-easing<\/code> \u2013 Animation smoothness.<\/p>\n\n<h3>Credits<\/h3>\n\n<p>Developed with \u2764\ufe0f by <a href=\"https:\/\/weblazer.github.io\/\">Arthur Ballan (WEBLAZER)<\/a><\/p>\n\n<!--section=installation-->\n<h4>Automatic installation<\/h4>\n\n<ol>\n<li>Go to \"Plugins\" \u2192 \"Add New\".<\/li>\n<li>Search for <strong>Any Block Carousel Slider<\/strong>.<\/li>\n<li>Click \"Install Now\" then \"Activate\".<\/li>\n<\/ol>\n\n<h4>Manual installation<\/h4>\n\n<ol>\n<li>Download the plugin archive.<\/li>\n<li>Upload the folder to <code>\/wp-content\/plugins\/<\/code>.<\/li>\n<li>Activate it from the \"Plugins\" menu.<\/li>\n<\/ol>\n\n<h4>Usage<\/h4>\n\n<ol>\n<li>Open a page, post, or template in the Gutenberg editor.<\/li>\n<li>Select a supported block (Gallery, Group, or Query Loop\/Post Template).<\/li>\n<li>Enable the <strong>Carousel<\/strong> button in the block settings.<\/li>\n<li>Adjust your columns, minimum width, or spacing.<\/li>\n<li>Publish or update: the carousel slider is operational.<\/li>\n<\/ol>\n\n<!--section=faq-->\n<dl>\n<dt id=\"how%20does%20any%20block%20carousel%20slider%20differ%20from%20traditional%20carousel%20blocks%3F\"><h3>How does Any Block Carousel Slider differ from traditional carousel blocks?<\/h3><\/dt>\n<dd><p>Unlike traditional carousels that force you to insert a dedicated \"Carousel\" block and rebuild each slide by hand, Any Block Carousel Slider turns the Gutenberg blocks you already have (Query Loop\/Post Template, Group, Gallery) into a slider via a simple toggle. With a Query Loop for instance, legacy solutions usually require limiting the loop to one post per slide and duplicating layouts. Here, one block is enough: single action, zero duplication, maximum performance.<\/p><\/dd>\n<dt id=\"is%20it%20compatible%20with%20all%20themes%20%28block%20themes%2C%20fse%29%3F\"><h3>Is it compatible with all themes (block themes, FSE)?<\/h3><\/dt>\n<dd><p>Yes. The Gutenberg carousel slider block plugin reads style variables generated by your theme (classic or full site editing) and applies the carousel slider without breaking the initial grid.<\/p><\/dd>\n<dt id=\"does%20it%20require%20javascript%20on%20the%20frontend%3F\"><h3>Does it require JavaScript on the frontend?<\/h3><\/dt>\n<dd><p>No. Everything relies on native CSS. Only a few lines of JavaScript executed in the editor handle the toggle interface. This means zero JavaScript bundle to load (unlike plugins using Swiper.js or Slick), resulting in better Lighthouse scores and Core Web Vitals.<\/p><\/dd>\n<dt id=\"how%20do%20i%20transform%20a%20query%20loop%20into%20a%20carousel%3F\"><h3>How do I transform a Query Loop into a carousel?<\/h3><\/dt>\n<dd><p>Enable the Query Loop Gutenberg block (or Post Template), configure your filters and rendering, then check <strong>Carousel<\/strong>. For Post Template blocks, switch the layout to <strong>Grid<\/strong> so you can control the number of cards displayed per viewport. Posts are automatically aligned on a scrollable line with snap and CSS arrows. This is the main advantage over traditional carousel slider plugins that don't support Query Loops natively.<\/p><\/dd>\n<dt id=\"can%20i%20mix%20images%2C%20titles%2C%20buttons%2C%20and%20forms%20in%20the%20same%20carousel%3F\"><h3>Can I mix images, titles, buttons, and forms in the same carousel?<\/h3><\/dt>\n<dd><p>Yes. The plugin respects existing inner Gutenberg blocks. A Group block containing image, text, buttons, or forms is transformed as-is in carousel mode.<\/p><\/dd>\n<dt id=\"how%20do%20i%20control%20the%20number%20of%20visible%20columns%3F\"><h3>How do I control the number of visible columns?<\/h3><\/dt>\n<dd><p>Switch the block layout to <strong>Grid<\/strong> in the Gutenberg sidebar (Layout panel) and set the desired column count for each breakpoint. The carousel inherits the same grid settings, so adjusting the Grid controls is the recommended way to decide how many slides remain visible.<\/p><\/dd>\n<dt id=\"woocommerce%20compatible%3F\"><h3>WooCommerce compatible?<\/h3><\/dt>\n<dd><p>Yes, when your products are rendered via the Query Loop\/Post Template block (for example by querying the <code>product<\/code> post type or a WooCommerce pattern). A dedicated integration for the legacy Products block remains on the roadmap, but today you can already build product sliders by using the Query Loop to target WooCommerce content.<\/p><\/dd>\n<dt id=\"is%20there%20an%20autoplay%20mode%2C%20infinite%20loop%2C%20or%20custom%20arrows%3F\"><h3>Is there an autoplay mode, infinite loop, or custom arrows?<\/h3><\/dt>\n<dd><p>The plugin focuses on native scroll and performance. You can add a light custom script if you want autoplay, but most sites get a better Core Web Vitals score by keeping native behavior.<\/p><\/dd>\n<dt id=\"can%20i%20have%20multiple%20carousels%20on%20the%20same%20page%3F\"><h3>Can I have multiple carousels on the same page?<\/h3><\/dt>\n<dd><p>Yes, without limit. Each Gutenberg block manages its own CSS variables for the carousel slider.<\/p><\/dd>\n<dt id=\"how%20do%20i%20adjust%20buttons%20or%20position%20markers%3F\"><h3>How do I adjust buttons or position markers?<\/h3><\/dt>\n<dd><p>In your theme or via a CSS snippets plugin, override the variables:<\/p>\n\n<pre><code>`css\n<\/code><\/pre>\n\n<p>.wp-block-group.is-carousel {\n    --carousel-button-bg: var(--wp--preset--color--primary);\n    --carousel-marker-size: 0.8rem;\n}\n    `<\/p>\n\n<p>If the navigation buttons look offset or partially hidden, wrap the carousel-enabled block inside a parent Group (or another container block) so the wrapper can provide the proper padding and overflow context for the controls.<\/p><\/dd>\n<dt id=\"what%20happens%20if%20the%20browser%20doesn%27t%20support%20%60%3A%3Ascroll-button%60%3F\"><h3>What happens if the browser doesn't support `::scroll-button`?<\/h3><\/dt>\n<dd><p>Visual arrows remain visible (disabled state) and users navigate via touch scroll or mouse wheel. The experience remains responsive.<\/p><\/dd>\n\n<\/dl>\n\n<!--section=changelog-->\n<h4>1.0.5.4 - 2026-04-16<\/h4>\n\n<ul>\n<li>\u2705 Verified compatibility with WordPress 7.0 (Gutenberg Phase 3: Collaboration).<\/li>\n<li>\ud83d\ude80 Maintenance release.<\/li>\n<\/ul>\n\n<h4>1.0.5.3 - 2026-03-11<\/h4>\n\n<ul>\n<li>\ud83c\udfa8 Removed redundant parent positioning CSS rule for better theme compatibility.<\/li>\n<\/ul>\n\n<h4>1.0.5.2 - 2026-03-11<\/h4>\n\n<ul>\n<li>\ud83e\uddf9 Removed default \"Hello World\" post from playground.<\/li>\n<li>\ud83c\udfa8 Fixed site icon (favicon) in playground demo.<\/li>\n<\/ul>\n\n<h4>1.0.5.1 - 2026-03-11<\/h4>\n\n<ul>\n<li>\ud83c\udfae Added official blueprint.json for 'Live Preview' button on WordPress.org.<\/li>\n<li>\ud83d\udd17 Improved playground link formatting.<\/li>\n<\/ul>\n\n<h4>1.0.5 - 2026-03-11<\/h4>\n\n<ul>\n<li>\ud83c\udfae Added official WordPress Playground interactive demo.<\/li>\n<li>\ud83c\udff7\ufe0f Maintenance and performance optimizations.<\/li>\n<\/ul>\n\n<h4>1.0.4.4 - 2026-03-05<\/h4>\n\n<ul>\n<li>\u2728 Improved button color synchronization in the Site Editor (FSE).<\/li>\n<li>\ud83c\udfa8 Carousel buttons now directly follow global theme styles by reading WordPress CSS variables (<code>--wp--style--elements--button--color--*<\/code>).<\/li>\n<li>\ud83d\udee1\ufe0f Enhanced editor reliability: dedicated hidden reference button prevents picking up custom block-level colors.<\/li>\n<li>\ud83d\udee0\ufe0f Robust iframe detection in the Site Editor for perfect WYSIWYG experience.<\/li>\n<\/ul>\n\n<h4>1.0.3.5 - 2025-11-14<\/h4>\n\n<ul>\n<li>\u267b\ufe0f Align plugin text domain with official WordPress.org slug.<\/li>\n<li>\ud83e\uddfc Renamed local plugin\/SVN directories to remove text-domain lint warnings.<\/li>\n<\/ul>\n\n<h4>1.0.3.4 - 2025-11-14<\/h4>\n\n<ul>\n<li>\ud83c\udff7\ufe0f Published the 1.0.3.4 release tag on WordPress.org.<\/li>\n<\/ul>\n\n<h4>1.0.3.3 - 2025-11-13<\/h4>\n\n<ul>\n<li>\ud83d\udd17 Simplified WordPress Playground link in \"Try it now\" section.<\/li>\n<li>\ud83d\udcdd Updated readme.txt to refresh WordPress.org cache.<\/li>\n<\/ul>\n\n<h4>1.0.4.3 - 2026-02-08<\/h4>\n\n<ul>\n<li>\ud83d\udee1\ufe0f Security: Added direct access protection to all PHP files.<\/li>\n<li>\ud83d\udcdd Documentation: Corrected WordPress version compatibility format.<\/li>\n<li>\ud83c\udff7\ufe0f Maintenance release.<\/li>\n<\/ul>\n\n<h4>1.0.4.2 - 2026-02-08<\/h4>\n\n<ul>\n<li>\ud83d\udee0\ufe0f Compatibility with WordPress 6.9.<\/li>\n<li>\ud83c\udff7\ufe0f Maintenance release.<\/li>\n<\/ul>\n\n<h4>1.0.4.1 - 2025-01-XX<\/h4>\n\n<ul>\n<li>\ud83d\udc1b Fixed CSS: commented out scroll-snap-stop to prevent blocking behavior.<\/li>\n<li>\ud83d\udc1b Fixed CSS: changed scroll-snap-align from center to start for better alignment.<\/li>\n<\/ul>\n\n<h4>1.0.4 - 2025-01-XX<\/h4>\n\n<ul>\n<li>\u2728 Added Loop functionality: infinite carousel scrolling with seamless reset to start\/end.<\/li>\n<li>\u2728 Added Autoplay functionality: automatic slide progression with configurable delay.<\/li>\n<li>\ud83c\udfaf Loop keeps navigation buttons visible even at carousel boundaries.<\/li>\n<li>\u23f1\ufe0f Autoplay respects configured delay before resetting when loop is enabled.<\/li>\n<li>\ud83c\udfa8 Improved scroll detection to ignore scroll-snap micro-adjustments.<\/li>\n<li>\ud83d\udc1b Fixed premature reset triggers when scrolling towards carousel end.<\/li>\n<li>\ud83d\udee0\ufe0f Enhanced boundary detection for better loop and autoplay behavior.<\/li>\n<\/ul>\n\n<h4>1.0.3.2 - 2025-11-13<\/h4>\n\n<ul>\n<li>\ud83c\udfae Added WordPress Playground demo with pre-configured carousel examples.<\/li>\n<li>\ud83d\udd17 Updated \"Try it now\" section with interactive demo link.<\/li>\n<\/ul>\n\n<h4>1.0.3.1 - 2025-11-13<\/h4>\n\n<ul>\n<li>\ud83d\udcdd Updated readme.txt to refresh WordPress.org cache.<\/li>\n<\/ul>\n\n<h4>1.0.3 - 2025-11-13<\/h4>\n\n<ul>\n<li>\ud83d\udd04 Plugin rebranded from \"Native Blocks Carousel\" to \"Any Block Carousel Slider\".<\/li>\n<li>\ud83d\udc1b Fixed dynamic arrow style updates in the Gutenberg editor (now works correctly in iframe contexts).<\/li>\n<li>\ud83c\udfa8 Improved block detection across editor iframes for better arrow icon synchronization.<\/li>\n<li>\ud83d\udee0\ufe0f Enhanced multi-context carousel updates for Site Editor and Block Editor compatibility.<\/li>\n<\/ul>\n\n<h4>1.0.2 - 2025-11-13<\/h4>\n\n<ul>\n<li>\u2728 Added dedicated toggles in the inspector to show or hide arrows and pagination markers independently.<\/li>\n<li>\ud83c\udfaf Introduced <code>carouselShowArrows<\/code> and <code>carouselShowMarkers<\/code> block attributes for fine-grained carousel controls.<\/li>\n<li>\ud83c\udfa8 Synced editor and frontend behaviors for the <code>abcs-hide-arrows<\/code> and <code>abcs-hide-markers<\/code> classes.<\/li>\n<li>\ud83d\udee0\ufe0f Bumped plugin version and refreshed asset headers.<\/li>\n<\/ul>\n\n<h4>1.0.1 - 2025-01-24<\/h4>\n\n<ul>\n<li>\u2728 Added Auto mode (fixed width) for Post Template and Group blocks.<\/li>\n<li>\u2728 Smart mode selection based on Gutenberg settings.<\/li>\n<li>\ud83c\udfa8 Complete horizontal\/vertical padding management via CSS variables.<\/li>\n<li>\ud83c\udfa8 Buttons and markers automatically adapt to custom spacing.<\/li>\n<li>\ud83d\udcf1 Fixed width respected even on mobile thanks to <code>min()<\/code> and <code>clamp()<\/code>.<\/li>\n<li>\ud83d\udcac Enhanced contextual messages in the editor to guide mode selection.<\/li>\n<li>\ud83d\ude80 Optimized editor JavaScript service to limit memory footprint.<\/li>\n<li>\ud83d\udc1b Fixed control positioning with asymmetric padding.<\/li>\n<li>\ud83d\udee0\ufe0f Internal refactor: PSR-4 autoload, modular services, front\/editor separation.<\/li>\n<\/ul>\n\n<h4>1.0.0 - 2025-01-10<\/h4>\n\n<ul>\n<li>\ud83c\udf89 Initial version available on WordPress.org.<\/li>\n<li>\u2705 Support for Gallery, Group, and Query Loop\/Post Template blocks.<\/li>\n<li>\ud83c\udfaf Automatic column and block spacing detection.<\/li>\n<li>\ud83d\udcf1 WordPress standard breakpoints integrated (1280 \u2192 375).<\/li>\n<li>\ud83c\udfa8 Responsive buttons and markers (3rem \u2192 1.75rem, 0.66rem \u2192 0.35rem).<\/li>\n<li>\ud83d\ude80 No JavaScript dependencies on frontend (100% native CSS).<\/li>\n<li>\u267f Keyboard navigation, respects <code>prefers-reduced-motion<\/code>.<\/li>\n<li>\ud83d\udd04 Multi-carousel compatibility on the same page.<\/li>\n<\/ul>","raw_excerpt":"Gutenberg carousel slider block: transform any WordPress block into a responsive carousel with pure CSS. Zero JavaScript.","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/test.wordpress.org\/plugins\/wp-json\/wp\/v2\/plugin\/257443","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/test.wordpress.org\/plugins\/wp-json\/wp\/v2\/plugin"}],"about":[{"href":"https:\/\/test.wordpress.org\/plugins\/wp-json\/wp\/v2\/types\/plugin"}],"replies":[{"embeddable":true,"href":"https:\/\/test.wordpress.org\/plugins\/wp-json\/wp\/v2\/comments?post=257443"}],"author":[{"embeddable":true,"href":"https:\/\/test.wordpress.org\/plugins\/wp-json\/wporg\/v1\/users\/weblazer"}],"wp:attachment":[{"href":"https:\/\/test.wordpress.org\/plugins\/wp-json\/wp\/v2\/media?parent=257443"}],"wp:term":[{"taxonomy":"plugin_section","embeddable":true,"href":"https:\/\/test.wordpress.org\/plugins\/wp-json\/wp\/v2\/plugin_section?post=257443"},{"taxonomy":"plugin_tags","embeddable":true,"href":"https:\/\/test.wordpress.org\/plugins\/wp-json\/wp\/v2\/plugin_tags?post=257443"},{"taxonomy":"plugin_category","embeddable":true,"href":"https:\/\/test.wordpress.org\/plugins\/wp-json\/wp\/v2\/plugin_category?post=257443"},{"taxonomy":"plugin_contributors","embeddable":true,"href":"https:\/\/test.wordpress.org\/plugins\/wp-json\/wp\/v2\/plugin_contributors?post=257443"},{"taxonomy":"plugin_business_model","embeddable":true,"href":"https:\/\/test.wordpress.org\/plugins\/wp-json\/wp\/v2\/plugin_business_model?post=257443"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}