Rouergue Creation Carousel Style Query Loop

Wopisanje

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

Fota wobrazowki

  • Selecting the „Carousel“ style in the Query Loop block
  • Example of the carousel display on the front-end

Instalacija

  1. From your site dashboard, go to Plugins -> Add New.
  2. Search for „Native Block Carousel Query Loop“
  3. Click install and activate the plugin
  4. In the block editor (Gutenberg), insert a Query Loop block
  5. In the block settings Styles Panel, select the Carousel style
  6. 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.

HSP

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.

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%;
    }

Pohódnoćenja

Za tutón tykač pohódnoćenja njejsu.

Sobuskutkowarjo a wuwiwarjo

„Rouergue Creation Carousel Style Query Loop“ je softwara wotewrjeneho žórła. Slědowacy ludźo su k tutomu tykačej přinošowali.

Sobuskutkowarjo

„Rouergue Creation Carousel Style Query Loop“ je so do 1 rěče přełožił. Dźakujemy so přełožowarjam za jich přinoški.

Přełožće „Rouergue Creation Carousel Style Query Loop“ do swojeje rěče.

Na wuwiću zajimowany?

Přehladajće kod, hladajće do SVN-repozitorija abo abonujće wuwiwanski protokol přez RSS.

Protokol změnow

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