Rouergue Creation Carousel Style Query Loop
| 开发者 | rock4temps |
|---|---|
| 更新时间 | 2026年4月18日 14:21 |
| PHP版本: | 7.4 及以上 |
| WordPress版本: | 7.0 |
| 版权: | GPLv3 or later |
| 版权网址: | 版权信息 |
详情介绍:
This plugin enhances the Gutenberg Query Loop block by adding a new "Carousel" style
that transforms the list of posts or CPT into a horizontal scrolling carousel, using only modern CSS.
Features:
- Works with the native WordPress Query Loop block
- "Carousel" style selectable in the Styles panel of the block settings
- By default, the carousel allows scrolling by pagination of three posts per page.
- Navigation with built-in browser scroll buttons & markers
- Responsive, compatible with desktop & mobile devices.
安装:
- From your site dashboard, go to Plugins -> Add New.
- Search for "Native Block Carousel Query Loop"
- Click install and activate the plugin
- In the block editor (Gutenberg), insert a Query Loop block
- In the block settings Styles Panel, select the Carousel style
- In the Block Settings, define a Custom Query Type, choose your Post Type, select a number of items per page greater than three, in Advanced settings disable Reload Entire Page.
屏幕截图:
常见问题:
Can I change the slider width?
= Is it compatible with all browsers? =\ The carousel uses recent CSS specifications.\ Currently, it is supported by Chrome, Edge and Opera. Other browsers will display a standard Query Loop layout. = Does the plugin use JavaScript? =\ Yes, a very lightweight JavaScript is used solely to enable keyboard navigation with the arrow keys ← →. The carousel's core functionality relies on native CSS. = Is keyboard navigation possible? =\ Yes.
- Right arrow (→): next page
- Left arrow (←): previous page A loop mode allows you to return to the beginning or the end.
- Embed the Query Loop block within a Column block.
- You can also customize the carousel width by overriding the plugin's CSS file via your child theme,or via the tool in the Appearance/Customize/Custom CSS menu.
.wp-block-query.is-style-nbcql-carousel-query-loop{
width:720px;
max-width: 100%;
}
更新日志:
1.0.1
Added
- Added keyboard navigation using the ← → keys
- Added a loop mode for keyboard navigation
- Updated documentation
- The Carousel style is not applied to the Query Loop block when multiple CSS classes are present.
- First stable version
- Added the "Carousel" style for the Query Loop block