外掛說明
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.
🔍 Démo
Discover the plugin in action on our Demo Site
🌍 Translations
◆ English
◆ French
Discover our other plugins
◆ Easy Custom Event Tickets
◆ Editor Custom Color Palette
◆ Filter Bar Custom Post Type
◆ Rouergue Creation Top Notice Bar
◆ Rouergue Creation Events Sidebar
◆ Slider Galerie Native Responsive
螢幕擷圖
安裝方式
- 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.
常見問題集
-
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. -
Yes.
- Right arrow (): next page
- Left arrow (): previous page
A loop mode allows you to return to the beginning or the end.
-
Is the carousel’s default pagination configurable?
-
The number of posts displayed per carousel page is determined by the MAX NUMBER OF COLUMNS
setting in the Query Loop block’s post template. -
Can multiple carousels be displayed on the same page?
-
Yes, you can display several different carousels on the same page.
-
Can I change the slider width?
-
To change the slider width, you can:
- 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.2
Modified
- Optimizing loading styles & JS script
- Recourse when the user has not disabled page reload in the advanced settings of the request loop block
- The number of carousel columns is no longer three by default, but is defined in the query loop block settings.
1.0.1
Added
- Added keyboard navigation using the keys
- Added a loop mode for keyboard navigation
- Updated documentation
Corrected
- The Carousel style is not applied to the
Query Loop block when multiple CSS classes are present.
1.0
- First stable version
- Added the “Carousel” style for the Query Loop block